javascript - 在用户选择中插入自定义标签

Question

我想在所选文本周围插入我自己的自定义标签和脚本。像这样的东西

var range = window.getSelection().getRangeAt(0);
var sel = window.getSelection();
range.setStart( sel.anchorNode, sel.anchorOffset );
range.setEnd(sel.focusNode,sel.focusOffset);

highlightSpan = document.createElement("abbr");
highlightSpan.setAttribute("style","background-color: yellow;");
highlightSpan.setAttribute("onmouseout","javascript:HideContentFade(\"deleteHighlight\");");
highlightSpan.setAttribute("onmouseover","javascript:ShowHighlighter(\"deleteHighlight\",\""+id_val+"\");");  
highlightSpan.appendChild(range.extractContents()); 
range.insertNode(highlightSpan);

这在正常情况下有效，但如果我在不同的段落中选择一些文本，extractContents API 将验证返回的 HTML 并放置额外的标签以使其成为有效的 HTML。我想要在没有额外验证 javascript 的情况下选择的确切 HTML。

有什么办法可以做到吗？我按照How can I highlight the text of the DOM Range object?中提到的方式试过了但问题是我想要用户特定的亮点，所以如果 A 添加了一些亮点 B 应该看不到它。为此，我准备了后端代码。

Answer 1

如果您用标签包裹属于不同段落的选定文本，则会创建无效的 HTML 代码。

这是您将生成的无效 HTML 代码的示例。

<p>notselected <span>selected</p><p>selected</span> notselected</p>

为了完成您的任务，您需要用标签将所选内容的每个段落中的每个文本包装起来，从而产生如下代码。

<p>notselected <span>selected</span></p><p><span>selected</span> notselected</p>

要完成此操作，您必须遍历所有选定的节点并像这样包装选定的文本:

function wrapSelection() {
    var range, start, end, nodes, children;

    range = window.getSelection().getRangeAt(0);
    start = range.startContainer;
    end = range.endContainer;

    children = function (parent) {
        var child, nodes;

        nodes = [];
        child = parent.firstChild;

        while (child) {
            nodes.push(child);
            nodes = nodes.concat(children(child));
            child = child.nextSibling;
        }

        return nodes;
    }

    nodes = children(range.commonAncestorContainer);
    nodes = nodes.filter(function (node) {
        return node.nodeType === Node.TEXT_NODE;
    });
    nodes = nodes.slice(nodes.indexOf(start) + 1, nodes.indexOf(end));
    nodes.forEach(function (node) {
        wrap = window.document.createElement("span");
        node.parentNode.insertBefore(wrap, node);
        wrap.appendChild(node);
    });

    start = new Range();
    start.setStart(range.startContainer, range.startOffset);
    start.setEnd(range.startContainer, range.startContainer.length);
    start.surroundContents(window.document.createElement("span"));

    end = new Range();
    end.setStart(range.endContainer, 0);
    end.setEnd(range.endContainer, range.endOffset);
    end.surroundContents(window.document.createElement("span"));
}