围绕 DIV 中的选定文本动态创建 SPAN答案

【问题标题】：Create SPAN around the selected text in a DIV dynamically围绕 DIV 中的选定文本动态创建 SPAN
【发布时间】：2016-02-24 22:20:33
【问题描述】：

我的 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>");

这不起作用。感谢您的帮助。提前致谢。

【问题讨论】：

标签： javascript jquery html css

【解决方案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);

【讨论】：

【解决方案2】：

也许您不需要通过使用 selection pseduo CSS 属性来创建这样的 SPAN 样式： https://css-tricks.com/overriding-the-default-text-selection-color-with-css/

【讨论】：

我希望在单击突出显示按钮后保留选择背景。