如何在HTML文档中的选定位置插入元素？

Question

我想在用户选择文档中的文本确定的位置插入一个元素(span,div等).

我能够得到选择的元素.但是我无法确定选择的确切位置.

例如:

<span>this is testing string for testing purpose</span>

在此,我们假设用户选择了第二个'测试'字样.我希望它被替换为

<span>this is testing string for <b>testing</b> purpose</span>

我该怎么做？

顺便说一句:我知道这是可能的.谷歌浪潮做到了.我只是不知道该怎么做

Answer 1

这将完成这项工作：

function replaceSelectionWithNode(node) {
    var range, html;
    if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0);
        range.deleteContents();
        range.insertNode(node);
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        html = (node.nodeType == 3) ? node.data : node.outerHTML;
        range.pasteHTML(html);
    }
}

var el = document.createElement("b");
el.appendChild(document.createTextNode("testing"));
replaceSelectionWithNode(el);