javascript实现页面内关键词高亮显示代码


Posted in Javascript onApril 03, 2014
<!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>
Javascript 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
ExtJS的FieldSet的column列布局
Nov 20 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 #Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 #Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 #Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 #Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 #Javascript
javascript实现des解密加密全过程
Apr 03 #Javascript
无刷新预览所选择的图片示例代码
Apr 02 #Javascript
You might like
AM/FM收音机的安装与调试
2021/03/02 无线电
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
php桌面中心(三) 修改数据库
2007/03/11 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
python中sets模块的用法实例
2014/09/30 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
django使用graphql的实例
2020/09/02 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
银行实习的自我鉴定
2013/12/10 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
文明村创建实施方案
2014/03/27 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS