本文详细讲解如何在JavaScript中利用Selection和Range对象在光标当前位置插入文本或节点。重点区分了IE与标准DOM下的不同实现方式，并对比了innerHTML与pasteHTML方法的适用场景，提供了具体的代码示例和操作步骤。
Selection与Range对象的基本用法
要在光标当前位置插入文本或节点，核心在于正确使用Selection对象和Range对象。需要注意的是，这两种对象在Internet Explorer（IE）浏览器与标准DOM环境中的具体用法存在差异。
基本实现思路如下：首先获取用户的选区，由于光标位置可视为起始点与终止点重合的选区，因此可直接获取该状态。接着，将Selection对象转换为Range对象，以便利用Range对象提供的方法插入内容。最后，在插入操作完成后，将光标移动至新插入内容的末尾。
var sel = win.document.selection; //IE
var sel = win.getSelection(); //DOM
var range = sel.createRange(); // IE下
var range = sel.getRangeAt(0); // DOM下
if(range.startContainer){ // DOM下
sel.removeAllRanges(); // 删除Selection中的所有Range
range.deleteContents(); // 清除Range中的内容
// 获得Range中的第一个html结点
var container = range.startContainer;
// 获得Range起点的位移
var pos = range.startOffset;
// 建一个空Range
range = document.createRange();
// 插入内容
var cons = win.document.createTextNode(",:),");
if(container.nodeType == 3){// 如是一个TextNode
container.insertData(pos, cons.nodeValue);
// 改变光标位置
range.setEnd(container, pos + cons.nodeValue.length);
range.setStart(container, pos + cons.nodeValue.length);
}else{// 如果是一个HTML Node
var afternode = container.childNodes[pos];
container.insertBefore(cons, afternode);
range.setEnd(cons, cons.nodeValue.length);
range.setStart(cons, cons.nodeValue.length);
}
sel.addRange(range);
}else{// IE下
var cnode = range.parentElement();
while(cnode.tagName.toLowerCase() != “body”){
cnodecnode = cnode.parentNode;
}
if(cnode.id && cnode.id==”rich_txt_editor”){
range.pasteHTML(",:),");
}
}
win.focus();
innerHTML与pasteHTML的区别
在实现过程中，需要明确innerHTML属性与pasteHTML方法的区别。
innerHTML是一个属性，用于获取或设置元素内部的HTML内容。它可以应用于任何包含HTML子节点的元素。
pasteHTML()是一个方法，用于在指定的文本区域内替换该区域内的文本或HTML。该方法必须应用于由createTextRange()或document.selection.createRange()创建的区域对象上。
var oRange = document.selection.createRange();
if(oRange.text!=''){
var oHtml = '<a href="#" rel="external nofollow" target=_blank>oRange.text</a>';
oRange.pasteHTML(oHtml);
} 以上内容涵盖了在JavaScript中通过Selection和Range对象插入文本的主要方法。希望这些内容能对学习和工作有所帮助，欢迎继续支持本站。