javascript实现页面内关键词高亮显示代码
更新时间：2014年04月03日 15:28:37 作者：
关键词高亮想必大家对它都不陌生吧，应用也比较广泛的，下面为大家介绍下通过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=utf-8" />
<title>关键字高亮显示</title>
</head>
<body>
<div class="result" id="textbox">
<p>百度（Nasdaq简称：BIDU）是全球最大的中文搜索引擎，2000年1月由李彦宏、徐勇两人创立于北京中关村，致力于向人们提供“简单，可依赖”的</p>
<p>信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。</p>
</div>
<script>
function highlight(idVal, keyword) {
var textbox = document.getElementById(idVal);
if ("" == keyword) return;
//获取所有文字内容
var temp = textbox.innerHTML;
console.log(temp);
var htmlReg = new RegExp("\<.*?\>", "i");
var arr = new Array();
//替换HTML标签
for (var i = 0; true; i++) {
//匹配html标签
var tag = htmlReg.exec(temp);
if (tag) {
arr[i] = tag;
} else {
break;
}
temp = temp.replace(tag, "{[(" + i + ")]}");
}
// 讲关键词拆分并入数组
words = decodeURIComponent(keyword.replace(/\,/g, ' ')).split(/\s+/);
//替换关键字
for (w = 0; w < words.length; w++) {
// 匹配关键词，保留关键词中可以出现的特殊字符
var r = new RegExp("(" + words[w].replace(/[(){}.+*?^$|\\\[\]]/g, "\\$&") + ")", "ig");
temp = temp.replace(r, "<b style='color:Red;'>$1</b>");
}
//恢复HTML标签
for (var i = 0; i < arr.length; i++) {
temp = temp.replace("{[(" + i + ")]}", arr[i]);
}
textbox.innerHTML = temp;
}
highlight("textbox","百度,李彦宏");
</script>
</body>
</html>
相关文章
在写项目时,难免遇到需要上传表单,图片等文件,且表单内容需进行验证及必填项提示,图片需要和信息一起传递且图片载入后需可预览,这篇文章给大家介绍el-form实现表单和图片手动上传和校验功能,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要介绍了javascript获取dom的下一个节点方法,实现在页面点击加减按钮数字的累加，需要的朋友可以参考下2014-09-09
这篇文章主要介绍了JavaScript中实现map功能代码分享,本文直接给出实现代码,给出一个MAP类,类中包含大多数的常用方法,还可以自己扩展,需要的朋友可以参考下2015-06-06
js中将时间戳转化成YYYY-MM-DD HH:mm:ss的3种实现办法
最近开发中需要和后端进日期和时间传值,前后端约定为时间戳的格式,但是前端展示需要展示成年-月-日的格式,就需要进行日期和时间转换格式,这篇文章主要给大家介绍了关于js中将时间戳转化成YYYY-MM-DD HH:mm:ss的3种实现办法,需要的朋友可以参考下2024-06-06
这篇文章主要给大家介绍了关于uniapp开发h5项目引入第三方js(sdk)的两种方法,在Uniapp中引入JS文件是一项常见的操作,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了浅谈js二维码扫码登录是什么原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了JavaScript中防止微信浏览器被整体拖动的方法,需要的朋友可以参考下2017-08-08
在Web开发中通过使用JavaScript可以动态地修改HTML元素的属性和样式,下面这篇文章主要给大家介绍了关于JS动态更改div高度实现的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下2023-11-11
Omi v1.0.2发布正式支持传递javascript表达式
这篇文章主要介绍了Omi v1.0.2发布正式支持传递javascript表达式,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
本节实例给出一个获取浏览器当前窗口大小的方法。当浏览器窗口大小变化时，显示的值会随时变化2011-12-12
最新评论