如何將所有選定的文本包裝到 span 元素中？

Question

有很多問題回答了如何從一個元素到 select 文本。 例如， 從這個答案：

function surroundSelection() {
    var span = document.createElement("span");
    span.style.fontWeight = "bold";
    span.style.color = "green";

    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0).cloneRange();
            range.surroundContents(span);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
}

但是我們如何為多個標簽做到這一點呢？ 例如，如果這是標記

<p>Lorem ipsum dolor sit amet,</p>
<p>consectetur START HERE adipisicing elit.</p>
<p>Eaque et END HERE possimus at minima, illo?</p>

如果用戶從第二段和第三段中選擇文本，如何將其包裹在自己的個人 div 中

<p>Lorem ipsum dolor sit amet,</p>
<p>consectetur <span>adipisicing elit.</span></p>
<p><span>Eaque et</span> possimus at minima, illo?</p>

我希望這個“破碎”的例子有幫助

Answer 1

您可以使用window.getSelection和window.getSelection.toString() 。

我做了一個快速示例，它在 h4 元素中顯示選定的文本。

 function getSelectedText() { let selectedText = document.getElementById('selectedText'); if (window.getSelection) { selectedText.innerHTML = window.getSelection().toString(); } else if (document.selection && document.selection.type.= "Control") { selectedText.innerHTML = document.selection.createRange();text; } }

 <p>Lorem ipsum dolor sit amet,</p> <p>consectetur START HERE adipisicing elit.</p> <p>Eaque et END HERE possimus at minima, illo?</p> <input type="button" onclick="getSelectedText()" value="Get Selection"> <h4 id="selectedText"></h4>

您還可以在Codepen上查看正在運行的代碼。