使用 JavaScript 突出显示文本并在突出显示的部分内添加粗体文本答案

【问题标题】：Highlight text and make bold text inside that highlighted section using JavaScript使用 JavaScript 突出显示文本并在突出显示的部分内添加粗体文本
【发布时间】：2014-03-12 16:58:18
【问题描述】：

我已经在这里做了一些例子：[http://jsfiddle.net/8mdX4/731/] 但它并没有突出显示所有选定的文本。它应该突出显示文本“m ipsum dolor sit ame”并在该突出显示的文本中添加粗体文本“um dolor si”，但文本“m ips”将保持不突出显示。

有什么办法可以解决这个问题或采取一些变通办法吗？

【问题讨论】：

标签： javascript range highlight

【解决方案1】：

我刚刚在这个帖子中找到了解决方案：

https://groups.google.com/forum/#!topic/mozilla.dev.tech.dom/dQK0ioISIPM

这是非常简单的解决方法。我有一个应该突出显示的范围，而突出显示的范围内有多个应该加粗的范围。

首先，我必须处理粗体文本，因为如果我要使用 "document.execCommand("BackColor",false, colour);" 突出显示文本在此之前，它会以某种方式破坏我的“大胆范围”。

所以解决方案是用这样的元素替换或包装“粗体范围”的文本内容：

if (boldRange) {
   boldRange.deleteContents();
   var newContents = document.createElement('b');
   newContents.textContent = 'text that would be bolded';
   boldRange.insertNode(newContents)
}

这里演示了它的工作原理：

http://jsfiddle.net/8mdX4/733/

【讨论】：