javascript做的高亮效果

最新推荐文章于 2021-11-17 09:16:11 发布

最新推荐文章于 2021-11-17 09:16:11 发布 · 238 阅读

文章标签：

#JavaScript #HTML #ViewUI

JavaScript 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了两种实现网页中关键词高亮显示的方法。方法一使用纯JavaScript操作DOM元素，通过替换文本实现高亮效果；方法二则利用正则表达式进行匹配并替换，实现了更简洁的高亮功能。

方法一：

<script>
functionHighLight(nWord){ 

if(nWord!=''){ 

varkeyword=document.body.createTextRange(); 

while(keyword.findText(nWord)){ 

keyword.pasteHTML("<spanstyle='color:red;'>"+keyword.text+"</span>"); 

keyword.moveStart('character',1); 

}

}

}

functionhighword(nWord){ 

vararray=nWord.split(","); 

for(vari=0;i<array.length;i++){ 

HighLight(array[i]);

}

}
</script>


<bodyonload="highword('li,jin')"> 

<p>liujinzhongliujinzhongliuzhong</p>

</body>

方法二：

<html>
<head>
<title>TestPage</title>
<scripttype="text/javascript"> 
<!--
functionhighLight(ele,keys) 
{
varreg=newRegExp("("+keys.replace(/,/,"|")+")","g"); 

ele.innerHTML=ele.innerHTML.replace(reg,"<fontcolor=\"red\">$1</font>"); 
}

window.onload=function() 
{
highLight(document.getElementsByTagName("p")[0],"li,jin"); 
}
//--> 
</script>
</head>

<body>
<p>liujinzhongliujinzhongliuzhong</p>
</body>
</html>