编程 Javascript

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高亮方法二：

<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 相关文章推荐

Exjs 入门篇

Apr 07 Javascript

js+css实现增加表单可用性之提示文字

Jun 03 Javascript

js+html5实现可在手机上玩的拼图游戏

Jul 17 Javascript

尝试动手制作javascript放大镜效果

Dec 25 Javascript

AngularJS+Bootstrap实现多文件上传与管理

Nov 08 Javascript

浅谈Vue.js 1.x 和 2.x 实例的生命周期

Jul 25 Javascript

javascript帧动画(实例讲解)

Sep 02 Javascript

Three.js基础学习教程

Nov 16 Javascript

详解Vue.js v-for不支持IE9的解决方法

Dec 29 Javascript

总结4个方面优化Vue项目

Feb 11 Javascript

基于vue实现web端超大数据量表格的卡顿解决

Apr 02 Javascript

使用webpack搭建vue项目及注意事项

Jun 10 Javascript

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