javascript - 围绕 DIV 中的选定文本动态创建 SPAN

Question

我的 HTML 页面中有一个 div，如下所示:

    <div class="well editor" id="highlighted-text" 
style="overflow: scroll; overflow-x:hidden;height:500px;" contenteditable></div>

当我在 div 中选择部分文本并单击按钮时，我想突出显示所选文本。

我知道这可以通过在所选文本周围添加带有类选择器的跨度来完成，但是我在围绕所选文本创建跨度时遇到了问题:

var node = window.getSelection().focusNode;
$(node).wrapInner("<b></b>");

这行不通。感谢您的帮助。提前致谢。

Answer 1

我明白了......我这样做了:

var selection= window.getSelection().getRangeAt(0);
var selectedText = selection.extractContents();
var span= document.createElement("span");
span.style.backgroundColor = "yellow";
span.appendChild(selectedText);
selection.insertNode(span);