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代码替换。所以，如果我想使用“＆lt; b＆gt;”和“＆lt; / b＆gt;”而不是“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);
}

在jQuery中替换选定的HTML文本

1 个答案: