在前端开发中，我们时常需要实现对页面中某些文本的高亮显示。这篇文章将介绍如何使用 JavaScript 实现文本高亮，并附上示例代码。
1. 获取文本内容
首先，我们需要获取需要高亮的文本。可以通过选择器获取 DOM 元素，然后使用 textContent 或者 innerHTML 属性来获取元素的文本内容。
const element = document.querySelector('#content'); const content = element.textContent;
2. 高亮文本
要实现文本高亮，我们需要用一个正则表达式匹配需要高亮的文本，并将其包裹在一个带有样式的标签中。在此过程中，我们可以使用 replace() 方法来替换字符串。
const keyword = 'JavaScript'; const regExp = new RegExp(keyword, 'gi'); // gi 表示全局匹配，不区分大小写 const highlightedContent = content.replace(regExp, `<span class="highlight">${keyword}</span>`);
3. 渲染高亮文本
我们可以将渲染后的高亮文本插入到指定元素中。在此之前，需要创建一个新的 DOM 元素，并将高亮文本作为该元素的 innerHTML 属性。
const highlightedElement = document.createElement('div'); highlightedElement.innerHTML = highlightedContent; element.appendChild(highlightedElement);
4. 完整示例代码
下面是一个完整的示例代码，演示了如何使用 JavaScript 实现文本高亮。
<div id="content"> <p>JavaScript 是一门强大的编程语言。</p> <p>它能够实现动态效果，使得网页更加生动有趣。</p> </div>
.highlight { background-color: yellow; }
-- -------------------- ---- ------- ----- ------- - ----------------------------------- ----- ------- - -------------------- ----- ------- - ------------- ----- ------ - --- --------------- ------ ----- ------------------ - ----------------------- ------ -------------------------------------- ----- ------------------ - ------------------------------ ---------------------------- - ------------------- ----------------------------------------展开代码
5. 总结
本文主要介绍了如何使用 JavaScript 实现文本高亮。具体来说，我们需要获取文本内容、用正则表达式匹配需要高亮的文本、将其包裹在带有样式的标签中，并最终渲染高亮文本。这个技巧对于开发搜索引擎或者文章阅读器等应用场景非常有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29135
