js文本替换（高亮效果）

最新推荐文章于 2024-10-26 21:37:30 发布

原创最新推荐文章于 2024-10-26 21:37:30 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#正则表达式 #html #javascript #button #function #table

js html 专栏收录该内容

2 篇文章

订阅专栏

本文提供了一段JavaScript代码示例，用于实现网页上的文本高亮功能。通过使用正则表达式，该脚本能够匹配指定的关键词并将其以不同颜色高亮显示。

工作中用到的一段js正则表达式，留下来备用。

核心就是正则表达式，话不多说，上代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>文字高亮</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script language="javascript"> function init() { var keys = new Array("aa", "bb", "cc"); var keysOther = new Array("11", "22", "33"); var reblog = eval("/("+keys.join('|')+")/gi"); document.getElementById("title").innerHTML = document.getElementById("title").innerHTML.replace(reblog,"<font color=red>$1</font>"); document.getElementById("summary").innerHTML = document.getElementById("summary").innerHTML.replace(reblog,"<font color=red>$1</font>"); var reblogOther = eval("/("+keysOther.join('|')+")/gi"); document.getElementById("title").innerHTML = document.getElementById("title").innerHTML.replace(reblogOther,"<font color=yellow>$1</font>"); document.getElementById("summary").innerHTML = document.getElementById("summary").innerHTML.replace(reblogOther,"<font color=yellow>$1</font>"); } </script> </head> <body> <button onclick="init()">xxxxxxx</button> <table width="100%" height="100%"> <tr> <td id="title"> asdasdflsajdfaafdsfjbbfdsffecc11sdfsssscc22222sdfs333 </td> </tr> <tr> <td id="summary"> asdasdflsajdfaafdsfjbbfdsffecc11sdfsssscc22222sdfs333 </td> </tr> </table> </body> </html>