在jQuery中替换选定的HTML文本

Question

我有以下代码，用于替换选定文本：（在选定文本前后添加“1”和“2”）：

var content=$("#text").html();
if (window.getSelection) {
 // not IE case
 var selObj = window.getSelection(); 
 var selRange = selObj.getRangeAt(0);

 content2 = content.substring(0,selRange.startOffset) + "1" + content.substring(selRange.startOffset,selRange.endOffset) + "2" + content.substring(selRange.endOffset,content.length);
 $("#content").html(content2);
 selRange.removeAllRanges();
} else if (document.selection && document.selection.createRange && document.selection.type != "None") {
 // IE case
 range = document.selection.createRange();
 var selectedText = range.text; 
 var newText = '1' + selectedText + '2'; 
 document.selection.createRange().text = newText; 
}

并且 HTML：

<div id="text">aaa as asd das d</div>

这适用于“纯文本”，但如果我的HTML看起来像这样（加粗的文本）：

<div id="text">aaa as <b>asd</b> das d</div>

在火狐浏览器中出现了问题，因为selRange.startOffset对象没有返回所需的位置...

还有一个问题...在IE中，加粗和“正常”文本都可以正常工作，但由于我没有使用jquery html()函数，因此无法用HTML代码替换文本。因此，如果我想使用“< b>”和“< /b>”而不是“1”和“2”，则在火狐浏览器中文本将无法以加粗的方式显示。

这两个问题能够解决吗？

- domagojk

Answer 1

startOffset和endOffset是当前节点中的偏移量，要获取它们，需要使用range.startContainer和range.endContainer。

编辑：如果startContainer和endContainer在同一层级上（DOM树结构得到保留），则它能够正常工作。

编辑2：现在它会使每个选择的文本加粗。

此外，我重写了IE部分，现在它可以操作HTML，所以很不错。 http://jsfiddle.net/FYJtN/11/

if (window.getSelection) {
    // not IE case
    var selObj = window.getSelection();
    var selRange = selObj.getRangeAt(0);

    var newElement = document.createElement("b");
    var documentFragment = selRange.extractContents();
    newElement.appendChild(documentFragment);
    selRange.insertNode(newElement);

    selObj.removeAllRanges();
} else if (document.selection && document.selection.createRange && document.selection.type != "None") {
    // IE case
    var range = document.selection.createRange();
    var selectedText = range.htmlText;
    var newText = '<b>' + selectedText + '</b>';
    document.selection.createRange().pasteHTML(newText);
}

- pepkin88