JavaScript正则表达式实现关键字高亮加粗

作者:代码拾荒时间:2026-10-30 11:41:13浏览:193

本文介绍利用JavaScript正则表达式实现字符串中特定关键字的查找与替换功能。通过RegExp对象构建匹配模式,结合replace方法将匹配到的文本包裹在strong标签中,从而实现前端页面的关键字加粗高亮显示效果。

JavaScript正则表达式实现关键字高亮加粗

本文详细介绍如何在JavaScript中利用正则表达式完成关键字替换并实现加粗显示的功能。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>正则替换</title>
</head>
<body>
<script type="text/javascript">
var str = "使用正则表达式把关键字替换加粗,文字加粗";
var word = "加粗";
str = str.replace(new RegExp("(" + word + ")","ig"), "<strong>" + word + "</strong>");
document.write(str);
</script>
</body>
</html>

具体运行效果如下图所示:

JavaScript正则表达式实现关键字高亮加粗

此外,推荐以下两款实用的正则表达式辅助工具供参考:

JavaScript正则表达式在线测试工具: http://tools.jb51.net/regex/javascript

正则表达式在线生成工具: http://tools.jb51.net/regex/create_reg

如需进一步了解JavaScript相关知识,可参考本站相关专题:《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文提供的技术方案对JavaScript开发工作有所助益。

作者最新文章