JavaScript实现网页关键字高亮显示
作者:青柠时间:2026-10-29 16:32:11浏览:647
本文介绍一种使用JavaScript在前端实现网页关键字识别与高亮显示的方法。通过将部分处理逻辑移至浏览器端,有效减轻服务器压力。文中提供了完整的HTML与JS代码示例,展示如何利用DOM操作将匹配的关键字添加红色样式并插入文档流,供开发者参考学习。
JavaScript实现网页关键字高亮显示
本文介绍一种利用JavaScript识别网页关键字并将其高亮显示的技术方案。
该方法演示了如何在客户端智能识别关键字并赋予红色样式。相较于服务器端控制输出,将此类功能交由浏览器处理能显著降低服务器负载,提升效率。
具体运行效果见下图:

在线演示地址如下:
http://demo.jb51.net/js/2015/js-keyword-show-red-color-codes/
核心实现代码如下:
<!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=utf-8" />
<title>JS查询替换关键字</title>
<style type="text/css">
span{color:#f00;font-weight:bold;}
</style>
</head>
<body>
<div>我是标题:这里是文字介绍!</div>
<div>我是老二:老二的描述性文字。</div>
<script type="text/javascript">
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
var text = divs[i].innerHTML;
var index = text.indexOf(':');
var span = document.createElement('span');
span.innerHTML = text.substring(0,index+1);
divs[i].innerHTML = text.substring(index+1);
divs[i].insertBefore(span,divs[i].firstChild);
}
</script>
</body>
</html>
希望本文所述内容对JavaScript编程实践有所助益。
作者最新文章
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别:JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
