JavaScript实现网页关键字高亮显示

作者:青柠时间:2026-10-29 16:32:11浏览:647

本文介绍一种使用JavaScript在前端实现网页关键字识别与高亮显示的方法。通过将部分处理逻辑移至浏览器端,有效减轻服务器压力。文中提供了完整的HTML与JS代码示例,展示如何利用DOM操作将匹配的关键字添加红色样式并插入文档流,供开发者参考学习。

JavaScript实现网页关键字高亮显示

本文介绍一种利用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编程实践有所助益。

作者最新文章