Question

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

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

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

我理解这可以通过在所选文本周围添加带有类选择器的span来完成，但是我无法在所选文本周围创建范围：

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);

Answer 2

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

动态地在DIV中围绕选定文本创建SPAN

2 个答案: