Javascript之模拟文字高亮显示

最新推荐文章于 2023-02-15 16:22:00 发布

山阴少年

最新推荐文章于 2023-02-15 16:22:00 发布

阅读量642

点赞数

文章标签： javascript 高亮

本文链接：https://blog.csdn.net/jclian91/article/details/78922525

版权

在我们平时浏览网页的时候，我们常常会用到Ctrl+F（搜索）功能，被搜索到的文字就是高亮显示。那么，如何在Javascript中模拟文字高亮显示这一功能呢？

以下为笔者写的样例代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Highlight</title>
	<!--style of mark:Green,bold.-->
	<style>
        mark {
            background-color:#00ff90; font-weight:bold;
        }
		p{text-indent:2em;} 
    </style>
	
	<script>
	//highlight 'query' in page
	function Func(){
		var query = document.getElementById('query').value;
		if(query == ''){alert('Query word is empty!')}
		else{
			var arr = [1, 2, 3, 4];
			var i;
			for(i=0; i<arr.length; i++){
				var x = String(arr[i]);	
				document.getElementById(x).innerHTML = document.getElementById(x).innerHTML.replace(new RegExp(query,'g'),'<mark>'+query+'</mark>');
			}
		}
	}
	//refresh the page to cancel highlighting
	function func(){
		window.location.reload();
	}
	</script>
	
</head>
<body>
    <!--example text-->
	<p id='1'>北京，简称“京”，是中华人民共和国的首都、直辖市、国家中心城市、超大城市、国际大都市，全国政治中心、文化中心、国际交往中心、科技创新中心是中国共产党中央委员会、中华人民共和国中央人民政府、全国人民代表大会、中国人民政治协商会议全国委员会、中华人民共和国中央军事委员会所在地，也是中部战区司令部驻地</p>
	
	<p id='2'>上海，简称“沪”或“申”，是中国共产党的诞生地，中华人民共和国直辖市，国家中心城市，超大城市，国际经济、金融、贸易、航运、科技创新中心，首批沿海开放城市。上海地处长江入海口，是长江经济带的龙头城市，隔东中国海与日本九州岛相望，南濒杭州湾，北、西与江苏、浙江两省相接。</p>
	
	<p id='3'>广州，简称穗，别称羊城、花城，广东省省会，位于广东省中南部，东江、西江、北江交汇处，珠江三角洲北缘，濒临中国南海。</p>
	
	<p id='4'>深圳，简称“深”，别称鹏城，中国四大一线城市之一，广东省省辖市、计划单列市、副省级市、国家区域中心城市、超大城市。地处广东南部，珠江三角洲东岸，与香港一水之隔，东临大亚湾和大鹏湾，西濒珠江口和伶仃洋，南隔深圳河与香港相连，北部与东莞、惠州接壤。</p>
	
	<!--input and button-->
	Query word: <input type="text" name="highlight" id='query'><br><br>
	<button type="button" οnclick="Func()">Highlight</button>
	<button type="button" οnclick="func()">Cancel Highlighting</button>
</body>
</html>

在“Query word“”中输入“中国”，显示如下：