js 搜索关键字，文章中关键字高亮显示

最新推荐文章于 2024-03-01 17:11:35 发布

陌听

最新推荐文章于 2024-03-01 17:11:35 发布

阅读量1w

点赞数 3

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/she_rryn/article/details/50780126

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

实现代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<style type="text/css">
		.highlight{background:green;font-weight:bold;color:white;}
	</style>
</head>
<body>

	<p><input id="input"/><button οnclick="highlight()">搜索</button></p>

<div id="div">
	<p>搜索，文章关键字高亮显示aaa</p>
	<p>搜索，文章关键字高亮显示bbb</p>
	<p>搜索，文章关键字高亮显示ccc</p>
	<p>搜索，文章关键字高亮显示ddd</p>
	<p>搜索，文章关键字高亮显示eee</p>
	<p>搜索，文章关键字高亮显示fff</p>
	<p>搜索，文章关键字高亮显示hhh</p>
</div>
</body>
<script type="text/javascript">
	function encode(s){
		return s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/([\\\.\*\[\]\(\)\$\^])/g,"\\$1");
	}
	function decode(s){
		return s.replace(/\\([\\\.\*\[\]\(\)\$\^])/g,"$1").replace(/>/g,">").replace(/</g,"<").replace(/&/g,"&");
	}
	function highlight(s){
		var s=document.getElementById("input").value;
		console.log(s);
		if (s.length==0){
			alert('搜索关键词未填写！');
			return false;
		}
		s=encode(s);
		var obj=document.getElementById("div");
		var t=obj.innerHTML.replace(/<span\s+class=.?highlight.?>([^<>]*)<\/span>/gi,"$1");
		obj.innerHTML=t;
		var cnt=loopSearch(s,obj);
		t=obj.innerHTML
		console.log(t);
		var r=/{searchHL}(({(?!\/searchHL})|[^{])*){\/searchHL}/g
		t=t.replace(r,"<span class='highlight'>$1</span>");
		obj.innerHTML=t;
	}
	function loopSearch(s,obj){
		var cnt=0;
		if (obj.nodeType==3){
			cnt=replace(s,obj);
			return cnt;
		}
		for (var i=0,c;c=obj.childNodes[i];i++){
			if (!c.className||c.className!="highlight")
				cnt+=loopSearch(s,c);
		}
		return cnt;
	}
	function replace(s,dest){
		var r=new RegExp(s,"g");
		var tm=null;
		var t=dest.nodeValue;
		var cnt=0;
		if (tm=t.match(r)){
			cnt=tm.length;
			t=t.replace(r,"{searchHL}"+decode(s)+"{/searchHL}")
			dest.nodeValue=t;
		}
		return cnt;}
</script>
</html>

陌听

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
js 搜索关键字，文章中关键字高亮显示

实现代码如下： .highlight{background:green;font-weight:bold;color:white;} 搜索搜索，文章关键字高亮显示aaa 搜索，文章关键字高亮显示bbb 搜索，文章关键字高亮显示ccc 搜索，文章关键字高亮显示ddd 搜索，文章关键字高亮显示eee 搜索，文章关键字高亮显示fff 搜索，文章关键字高亮
复制链接

扫一扫