JQuery找页面中的关键字

Pugham

于 2015-08-14 21:15:00 发布

阅读量355

点赞数 1

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/u010863051/article/details/47667825

版权

JS 专栏收录该内容

1 篇文章

订阅专栏

JQuery对页面中任意位置的关键字进行匹配并高亮

<html>
	<head>
		<title>高亮关键字</title>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script type="text/javascript">
		$(function(){
			var key = "Q";
			var reg = new RegExp(key, 'g');//g全局模式匹配;i不区分大小写匹配
			$(".forHightLight").each(function(){
				var text = $(this).text();//注意:是取text值，取html值可能会打乱整个页面
				var newHtml = text.replace(reg, "<span class='red'>" + key + "</span>");
				$(this).html(newHtml);
			});
		});
		</script>
		<style type="text/css">
			.red {color:red;}
		</style>
	</head>
	<body>
		<div>
			<p class="forHightLight">jQuery是一个JavaScript 库。</p>
			<p class="forHightLight">jQuery极大地简化了JavaScript 编程。</p>
			<p class="forHightLight">jQuery很容易学习。</p>
		</div>

		<div>
			<p>jQuery是一个JavaScript 库。</p>
			<p>jQuery极大地简化了JavaScript 编程。</p>
			<p>jQuery很容易学习。</p>
		</div>
	</body>
</html>