有没有办法使用 javascript 将样式应用于突出显示的文本？答案

【问题标题】：Is there a way to apply styling to highlighted text using javascript?有没有办法使用 javascript 将样式应用于突出显示的文本？
【发布时间】：2020-08-23 02:54:24
【问题描述】：

我正在努力创建一个功能丰富的文本编辑器，它可以模拟您在 MS word 和 google docs 等全尺寸文字处理器中找到的一些功能。我正在尝试将样式（粗体、斜体、突出显示等）应用于用户选择的文本。

我已经整理了以下代码来完成这项工作，但前提是突出显示的文本不跨越 html 元素。

const hightlightBtn = document.querySelector('.btn');
hightlightBtnS.addEventListener('click', () => {
    const selected = window.getSelection().getRangeAt(0);
    console.log(selected);
    highlightElement(selected);
});

function highlightElement(range){
    const newNode = document.createElement('div');
    newNode.setAttribute(
        'style',
        'background-color: yellow; display: inline;'
    )
    range.surroundContents(newNode);
};

如果我尝试突出显示来自两个段落的文本（并包含在单独的

标签）我得到了错误：

未捕获的 DOMException：无法在“Range”上执行“surroundContents”：Range 部分选择了非文本节点。

这似乎是环绕内容（）方法的问题。

在此方法的 MDN 参考资料中，我发现以下内容：

但是，如果 Range 仅使用其中一个边界点拆分非文本节点，则会引发异常。也就是说，与上面的替代方案不同，如果有部分选择的节点，它们将不会被克隆，而是操作将失败。

有什么办法可以在仍然使用环绕内容的同时解决这个问题？或者有人可以帮我找出另一种将样式应用于用户选择的文本的方法吗？

【问题讨论】：

标签： javascript html css

【解决方案1】：

为什么不简单地使用 CSS？

p::selection, p ::selection {
  background-color: green;
  color: #fff;
}

&lt;p&gt;Mark some text &lt;i&gt;here&lt;/i&gt; in this paragraph.&lt;/p&gt;

伪选择器::selection 具有非常广泛的浏览器支持，甚至可以追溯到IE 9：

https://caniuse.com/#feat=css-selection

【讨论】：