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

更新时间：2008年09月14日 21:09:59 作者：

js高亮效果实现代码，直接静态页面即可，不用每次都要生成

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> 

您可能感兴趣的文章:

基于BootStrap的前端分页带省略号和上下页效果
这篇文章主要介绍了基于BootStrap的前端分页带省略号和上下页效果,需要的朋友可以参考下
2017-05-05
JavaScript数组、json对象、eval()函数用法实例分析
这篇文章主要介绍了JavaScript数组、json对象、eval()函数用法,结合实例形式分析了JS数组创建、赋值、连接、翻转,json对象定义、读取,eval()函数的功能、使用等,需要的朋友可以参考下
2019-02-02
JS/jQuery实现超简单的Table表格添加,删除行功能示例
这篇文章主要介绍了JS/jQuery实现超简单的Table表格添加,删除行功能,结合实例形式详细分析了JS与jQuery针对Table表格添加,删除行功能的相关实现技巧,需要的朋友可以参考下
2019-07-07
js控件Kindeditor实现图片自动上传功能
这篇文章主要为大家详细介绍了js控件Kindeditor实现图片自动上传功能的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-06-06
Bootstrap Table使用方法解析
这篇文章主要为大家详细介绍了JS组件Bootstrap Table使用方法，具有一定的实用性和参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
根据配置文件加载js依赖模块
这篇文章主要介绍了根据配置文件加载js依赖模块,解决方法是笔者自己的思路，抛砖引玉，需要的朋友可以参考下
2014-12-12
简单了解微信小程序的目录结构
这篇文章主要介绍了简单了解小程序的目录结构，在开发小程序之前，我们首先需要对其目录结构进行了解，以便于提升开发效率,需要的朋友可以参考下
2019-07-07
Form表单按回车自动提交表单的实现方法
本文给大家分享form表单按回车自动提交表单的方法，在前端开发中经常会遇到，今天小编给大家介绍具体实现方法，感兴趣的朋友一起看看
2016-11-11
js实现淘宝首页的banner栏效果
这篇文章主要为大家详细介绍了js实现淘宝首页的banner栏效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
JS集合set类的实现与使用方法示例
这篇文章主要介绍了JS集合set类的实现与使用方法,结合具体实例形式分析了javascript集合的创建、元素添加、删除以及并集、交集、补集等运算相关操作技巧,需要的朋友可以参考下
2019-02-02