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

【问题标题】：How to insert an element at selected position in HTML document?如何在 HTML 文档中的选定位置插入元素？
【发布时间】：2013-11-18 14:37:28
【问题描述】：

我想在用户选择文档中的文本确定的位置插入一个元素（span、div 等）。

我能够获得进行选择的元素。但我无法获得选择的确切位置。

例如：

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

在此，假设用户选择了第二个“测试”词。我希望它被替换为

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

我该怎么做？

顺便说一句：我知道这是可能的。谷歌波做到了。我只是不知道该怎么做

【问题讨论】：

标签： javascript html dom

【解决方案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);

【讨论】：

document.selection 和 windows.getSelection() 是否适用于所有浏览器？
是的，它适用于过去几年发布的所有主流浏览器。我认为它可能无法在版本 3 之前的 Safari 中运行，但如果这对您来说是个问题，我可以提供早期 Safari 的解决方法。
非常感谢。它适用于 FF3.6、Crome、IE8、Opera 10.6
是的。它肯定适用于 IE 5.5+、Firefox 1.0+、Opera 9.6+、Safari 3.1+、任何版本的 Google Chrome。

【解决方案2】：

检索当前选定文本的方法因浏览器而异。许多 jQuery 插件提供跨平台解决方案。

（另见http://api.jquery.com/select/）

【讨论】：

api.jquery.com/select 说“当用户在其中进行文本选择时，选择事件被发送到元素。此事件仅限于字段和框。”所以这不是我想要的。我想对整个文档进行选择。

【解决方案3】：

查看此处了解工作的 jsFiddle：http://jsfiddle.net/dKaJ3/2/

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    alert(html);
}

【讨论】：