javascript高亮效果的二种实现方法


Posted in Javascript onSeptember 14, 2008

js高亮方法一:

<script> 
function HighLight(nWord){ if(nWord!=''){ 
var keyword = document.body.createTextRange(); 
while(keyword.findText(nWord)){ 
keyword.pasteHTML("<span style='color:red;'>" + keyword.text + "</span>"); 
keyword.moveStart('character',1); 
} 
} 
} 
function highword(nWord){ 
var array = nWord.split(","); 
for(var i=0;i<array.length;i++){ 
HighLight(array[i]); 
} 
} 
</script> 

<body onload="highword('li,jin')"> 
<p>liujinzhong liujinzhong liuzhong</p> 
</body>

js高亮方法二:

2.

<html> 
<head> 
<title>Test Page</title> 
<script type="text/javascript"> 
<!-- 
function highLight(ele,keys) 
{ 
var reg = new RegExp("(" + keys.replace(/,/,"|") + ")","g"); ele.innerHTML = ele.innerHTML.replace(reg,"<font color=\"red\">$1</font>"); 
} 
window.onload = function() 
{ 
highLight(document.getElementsByTagName("p")[0],"li,jin"); 
} 
//--> 
</script> 
</head> 
<body> 
<p>liujinzhong liujinzhong liuzhong</p> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript库 开发规则
Jan 31 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jquery 必填项判断表单是否为空的方法
Sep 14 #Javascript
js直接编辑当前cookie的脚本
Sep 14 #Javascript
javascript一些不错的函数脚本代码
Sep 10 #Javascript
利用Ext Js生成动态树实例代码
Sep 08 #Javascript
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 #Javascript
Javascript条件判断使用小技巧总结
Sep 08 #Javascript
SyntaxHighlighter代码加色使用方法
Sep 07 #Javascript
You might like
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
js实现验证码功能
2020/07/24 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
Python中内建函数的简单用法说明
2016/05/05 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
python mysql断开重连的实现方法
2019/07/26 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
乡镇安全生产目标责任书
2014/07/23 职场文书
教师工作态度自我评价
2015/03/05 职场文书
公司回复函格式
2015/07/14 职场文书
小学三年级作文之写景
2019/11/05 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript