Javascript：围绕用户选择获取html？答案

【问题标题】：Javascript: get html around user selection?Javascript：围绕用户选择获取html？
【发布时间】：2021-12-02 14:28:56
【问题描述】：

可以使用 Javascript 获取用户用鼠标选择的任何内容，如下所示：http://www.motyar.info/2010/02/get-user-selected-text-with-jquery-and.html

我的问题是我不仅需要这段文字，而且还需要：

获取围绕此文本的 html（例如，如果用户选择“hello”并且此 hello 在源中生成为：“<div><span>hello</span></div>”，这就是它应该返回的内容）。
对图形做同样的事情

任何人都可以指导我完成这个过程，或者如果这不可能，是否有替代方案？

【问题讨论】：

标签： javascript html wysiwyg selection

【解决方案1】：

这将在所有主要浏览器中执行。 IE 和更多符合标准的浏览器有单独的分支。在 IE 中，它稍微容易一些，因为从选择创建的专有 TextRange 对象有一个方便的 htmlText 属性。在其他浏览器中，您必须使用 DOM Range 的 cloneContents() 方法创建一个包含所选内容副本的 DocumentFragment，并通过将片段附加到元素并返回元素的 innerHTML 属性从中获取 HTML .

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;
        }
    }
    return html;
}

alert(getSelectionHtml());

【讨论】：

谢谢，这看起来很有希望。但是，当我只选择文本时，我通常不会收到包含文本的标签。虽然如果我选择更多（例如一些空格），它似乎确实返回了包含文本的标签。基本上，我只想获取选定的文本，然后选择我收到的文本上方的多少级别。例如。
test
应该返回 test、
test
或
test
取决于给定的级别（0 , 1, 2)。这可能吗？
@Tom：在<div><p><b>o|ne</b></p><p>tw|o</p></div>（管道表示选择边界）这样的情况下，您想做什么？在这里，您有一个选择，其边界处于不同的级别。
好话。考虑一下，我也许应该重新表述我的问题/需求。我需要的是一个数组，其中 html 在选择的左侧，选择的 html 和选择右侧的 html。所以在你的情况下： arr[0] =

o, arr[1] = ne

tw, arr[2] = o

。另一方面，我在quirksmode.org/dom/range_intro.html 读到，如果您在选择时遇到 html 的损坏部分，浏览器会自动添加结束标记，但不确定这是否正确（在所有情况下）。
如果以上内容足以让我发布一个新问题并接受这个问题，请告诉我。
我能问一下你为什么需要这个吗？这并不简单，对我来说似乎不自然。没错，浏览器确实会返回代表所选内容的有效 HTML，以便可以将其插入文档的其他位置。对于 IE，它返回一个字符串，而其他浏览器返回一个 DocumentFragment 节点。通常根据文档中的节点而不是 HTML 字符串表示来考虑 HTML 文档的各个部分更安全。

【解决方案2】：

你也可以这样做来让用户选择 HTML

function getUserSelectedHtml() {
    const range = window.getSelection().getRangeAt(0);
    const node = document.createElement('div');
    node.appendChild(range.cloneContents());

    return  node.innerHTML;
}

【讨论】：