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