javascript - 在 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>

它在 firefox 中崩溃了，因为 selRange.startOffset 对象没有返回所需的位置...

还有另一个问题...在 IE 中，这可以很好地处理粗体和“普通”文本，但是因为对于 IE，我没有使用 jquery html() 函数 - 文本不能用 HTML 代码替换。因此，如果我想使用“”和“”而不是“1”和“2”，文本将不会像 firefox 中那样加粗。

这两个问题能解决吗？

Answer 1

startOffset 和 endOffset 是当前节点的偏移量，要获取它你需要 range.startContainer 和 range.endContainer.

编辑:如果 startContainer 和 endContainer 处于同一级别(保留 DOM 树结构)，则效果很好。

EDIT2:现在它使每个选定的文本都变为粗体。

我还重写了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);
}