在前端开发中，有时候需要突出显示一些特殊的文本。比如搜索结果页中的关键字高亮显示，或者文章内容中的引用部分标注。JavaScript 可以通过操作DOM元素实现这个功能。本文将详细介绍如何使用JavaScript来实现文本突出显示的功能，并提供示例代码。
1. 获取文本
要实现文本突出显示的功能，首先需要获取文本内容。可以使用 JavaScript 提供的 textContent 或 innerHTML 属性来获取 DOM 元素的文本内容。
const text = document.getElementById('example').textContent;
console.log(text);上面的代码会获取 ID 为 example 的元素的文本内容，并输出到控制台上。
2. 突出显示文本
有了文本内容之后，我们就可以对文本进行处理，以实现突出显示效果。最简单的方法是使用正则表达式匹配文本中符合要求的字符串，并添加样式来区别其他文本内容。
const keyword = 'JavaScript'; // 需要突出显示的关键字
const regExp = new RegExp(keyword, 'g'); // 创建正则表达式对象
const highlightedText = text.replace(regExp, `<span class="highlight">${keyword}</span>`); // 使用 <span> 标签包裹需要突出显示的文本
document.getElementById('example').innerHTML = highlightedText; // 更新 DOM 中的内容上面的代码中，我们使用了 replace() 方法将匹配到的关键字用 <span> 标签包裹，并为其添加了一个名为 "highlight" 的 CSS 类，以便后续对这些文本进行样式处理。另外，需要注意的是，使用正则表达式时需要加上 g 标志，表示全局匹配。
3. 样式处理
最后一步是对突出显示的文本进行样式处理。可以通过设置 .highlight 类的 CSS 样式来实现不同的效果。
.highlight {
background-color: yellow;
font-weight: bold;
}上面的代码中，我们定义了一个 .highlight 类，它会将背景色设为黄色，字体加粗。当文本被添加这个类之后，就会如下图所示：
总结
至此，我们已经介绍了如何使用 JavaScript 来实现文本突出显示的功能。通过获取文本、匹配关键字、添加样式等几个步骤，我们可以轻松地实现这一功能。希望这篇文章对前端开发者有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14800