在前端开发中，我们时常需要实现对页面中某些文本的高亮显示。这篇文章将介绍如何使用 JavaScript 实现文本高亮，并附上示例代码。
1. 获取文本内容
首先，我们需要获取需要高亮的文本。可以通过选择器获取 DOM 元素，然后使用 textContent 或者 innerHTML 属性来获取元素的文本内容。
----- ------- - ----------------------------------- ----- ------- - --------------------
2. 高亮文本
要实现文本高亮，我们需要用一个正则表达式匹配需要高亮的文本，并将其包裹在一个带有样式的标签中。在此过程中，我们可以使用 replace() 方法来替换字符串。
----- ------- - ------------- ----- ------ - --- --------------- ------ -- -- ------------- ----- ------------------ - ----------------------- ------ --------------------------------------
3. 渲染高亮文本
我们可以将渲染后的高亮文本插入到指定元素中。在此之前，需要创建一个新的 DOM 元素，并将高亮文本作为该元素的 innerHTML 属性。
----- ------------------ - ------------------------------ ---------------------------- - ------------------- ----------------------------------------
4. 完整示例代码
下面是一个完整的示例代码，演示了如何使用 JavaScript 实现文本高亮。
---- ------------- ------------- --------------- ---------------------------- ------
---------- - ----------------- ------- -
----- ------- - ----------------------------------- ----- ------- - -------------------- ----- ------- - ------------- ----- ------ - --- --------------- ------ ----- ------------------ - ----------------------- ------ -------------------------------------- ----- ------------------ - ------------------------------ ---------------------------- - ------------------- ----------------------------------------
5. 总结
本文主要介绍了如何使用 JavaScript 实现文本高亮。具体来说，我们需要获取文本内容、用正则表达式匹配需要高亮的文本、将其包裹在带有样式的标签中，并最终渲染高亮文本。这个技巧对于开发搜索引擎或者文章阅读器等应用场景非常有用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29135