Javascript 在选择后插入HTML

我希望能够双击以选择div中的一些文本，然后触发一个JavaScript函数，在所选文本之后插入一些HTML，就像googlewave中的“编辑/回复”功能一样

我已经确定了如何在双击时触发一个函数，它将定位所选内容并随后插入HTML，这就是问题所在。

window.getSelection（）将获取所选文本（）。 可以使用jQuery.after（）（）在元素后插入新的html

在所选的文本函数调用中，您必须遍历所有DOM元素，检查它们的x&y位置到当前光标位置-获取最近的元素并插入到函数后面或使用函数。elementFromPoint（x，y）（）

---

这是我目前能想到的最好的方法。这不是完美的，但它是一个开始。

我不知道这是否可能，但我想到了部分解决方案

在双击事件中，您可以获得

目标

具有目标元素

现在获取目标元素html并找到所选文本的索引及其长度，将html插入

index+length

位置

我想你已经看到了这个问题，它可以在多个地方匹配文本。要解决这个问题，您可能需要找到光标的位置并与元素进行比较，我不知道如何做到这一点

---

希望我能帮点忙。

以下函数将在所有主要浏览器的选择末尾插入DOM节点（元素或文本节点）（请注意，Firefox现在默认允许多个选择；以下仅使用第一个选择）：

如果希望插入HTML字符串，请执行以下操作：

function insertHtmlAfterSelection(html) {
    var sel, range, node;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = window.getSelection().getRangeAt(0);
            range.collapse(false);

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.collapse(false);
        range.pasteHTML(html);
    }
}

2012年1月18日更新

最后，这里是一个插入HTML并保留选择的版本（即扩展选择以包括最初选择的内容和插入的内容）

现场演示：

代码：

---

谢谢我将尝试一下。插入html后是否可以保留选择？现在我插入了html，但是选择丢失了。@Towa:如何保存？您的意思是selectio会扩展以包含插入的内容吗？我会假设这一点，然后发布一个修订版……你有没有可能帮我解决这个问题？你首先是如何得到坐标的？因为

window.getSelection（）

不返回任何x，y坐标

function insertHtmlAfterSelection(html) {
    var sel, range, node;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = window.getSelection().getRangeAt(0);
            range.collapse(false);

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.collapse(false);
        range.pasteHTML(html);
    }
}

function insertHtmlAfterSelection(html) {
    var sel, range, expandedSelRange, node;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = window.getSelection().getRangeAt(0);
            expandedSelRange = range.cloneRange();
            range.collapse(false);

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                expandedSelRange.setEndAfter(lastNode);
                sel.removeAllRanges();
                sel.addRange(expandedSelRange);
            }
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        expandedSelRange = range.duplicate();
        range.collapse(false);
        range.pasteHTML(html);
        expandedSelRange.setEndPoint("EndToEnd", range);
        expandedSelRange.select();
    }
}