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);

Answer 2

请参阅此处了解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);
}

Answer 3

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

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

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

3 个答案: