window.getSelection() 给了我选定的文本，但我想要 HTML

Question

我正在扩展 WYSIWYG HTML 编辑器（用于 Firefox），我想在选择周围添加标签。 我在Mozilla Midas 规范中找不到实现此功能的功能。

有一个命令可以用 HTML 替换选择。
因此，如果我可以阅读选择内容，我可以将我的标签添加到该字符串中。

window.getSelection()几乎可以工作，但它给了我nsISelection转换为纯文本字符串。

PS： document.getSelection()返回纯文本字符串，甚至不返回nsISelection 。

Answer 1

看看DOM Range 规范。 您可以使用以下方法从 Firefox 中的用户选择中获取Range ：

var range = window.getSelection().getRangeAt(0);

请注意，包括 Firefox 在内的某些浏览器允许多选，可以通过选择的getRangeAt()方法访问。

Range以 DOM 节点和这些节点内的偏移量表示。 一旦你有了Range ，就不能简单地做你想做的事，因为范围的边界可能在 DOM 树的不同级别的不同节点中，所以简单地用标签包围 Range 的内容并不总是可能的。 您可能可以执行以下操作，尽管它会创建一个新的块元素来包含所选内容：

var range = window.getSelection().getRangeAt(0);
var selectionContents = range.extractContents();
var div = document.createElement("div");
div.style.color = "yellow";
div.appendChild(selectionContents);
range.insertNode(div);

另一种，hacky，替代方法是使用document的execCommand()方法来修改选择（例如，通过将其设置为特定颜色），然后使用document.querySelectorAll或某些选择器库来选择具有该颜色的元素，然后将样式应用于他们。

Answer 2

Tim Down 的答案是正确的。 然而，一个问题是 extractContents() 将从 dom 中删除选择。 您可以使用

window.getSelection().getRangeAt(0).cloneContents();

只是获取所选内容的副本。 然后你可以用你的新标签包装它，然后用它替换选择。 Tim Down 对跨越多个 HTML 元素的范围的担忧当然是有道理的。 我认为一旦你得到范围，它就会“修复”html，但是当你把它放回去时，它可能会导致问题。 这是 Range 对象的一个很好的资源。

Answer 3

window.getSelection() 将返回一个对象。 您可以通过调用 objects .toString() 方法将返回的选择对象用作字符串。

var selObj = window.getSelection();
var selectedText = selObj.toString();

https://developer.mozilla.org/en/DOM/window.getSelection

Answer 4

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>select content of particular element</title>
</head>

<body>
    <div id="div">This is the div tag</div>
    <p>this is the paragraph</p>
    <button id="Btn">Button</button>
    <script>
        let Btn = document.getElementById("Btn");
        Btn.addEventListener("click", function () {
            let selection = document.getSelection();
            if (selection.anchorNode.parentElement.id == "div") {
                let selectionContents = document.getSelection().toString();
                console.log("selected content of div id :", selectionContents)
            }
            else{
                console.log("pls select some text")
            }
        })
    </script>
</body>

</html>

window.getSelection() 给了我选定的文本，但我想要 HTML

问题描述

4 个解决方案

解决方案1
46 2010-01-26 13:58:12

解决方案2
15 2010-01-26 14:20:47

解决方案3
6 2011-11-20 03:32:07

解决方案4
0 2022-06-10 15:12:12

window.getSelection() 给了我选定的文本，但我想要 HTML

问题描述

4 个解决方案

解决方案1 46 2010-01-26 13:58:12

解决方案2 15 2010-01-26 14:20:47

解决方案3 6 2011-11-20 03:32:07

解决方案4 0 2022-06-10 15:12:12

解决方案1
46 2010-01-26 13:58:12

解决方案2
15 2010-01-26 14:20:47

解决方案3
6 2011-11-20 03:32:07

解决方案4
0 2022-06-10 15:12:12