jQuery实现：将文本内的部分字段增添样式标红

shliu2333

于 2017-06-14 16:20:12 发布

阅读量2.5k

点赞数 1

分类专栏： jQuery 文章标签： jquery 需求

本文链接：https://blog.csdn.net/m0_37578731/article/details/73246246

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题描述：

遇到一个将文本域内指定文本标红的需求，写了个demo将实现方式记录下来。

解决办法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>replaceDemo</title>
	</head>
	<body>
		<h1 id="content">算法和数据结构是程序的第一秘诀，缺之算法和数据结构是编程的最大原因。</h1>
	</body>
	<script type="text/javascript">
		var str = "算法" + "," + "数据结构";
		//循环的分别赋样式
		for (var i = 0; i < str.split(',').length; i++) {
			var re = "/"+str.split(',')[i]+"/g";
			//获取对象内容
			var txt = document.getElementById("content").innerHTML;
			//给符合要求的文本加上样式替换掉，eval解决转义问题
			document.getElementById("content").innerHTML = txt.replace(eval(re),"<span style='color:red'>"+str.split(',')[i]+"</span>");
		}
	</script>
</html>