js--文本查找替换

最新推荐文章于 2024-05-13 10:26:08 发布

马晨宇

最新推荐文章于 2024-05-13 10:26:08 发布

阅读量2k

点赞数 2

分类专栏： js

本文链接：https://blog.csdn.net/mcyhero/article/details/90920716

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box {
				width: 400px;
				height: 400px;
				border: 1px solid red;
			}
			span {
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="box">
			5月9日，外交部发言人耿爽主持例行发布会。
			澎湃新闻：据报道，美国国务卿蓬佩奥8日访问英国时称，中国倡导的“一带一路”倡议损害各国主权，美方敦促英方对“一带一路”保持警惕并发声反对，中方对此有何评论？
			耿爽：一段时间以来，美方的个别人士针对“一带一路”倡议持续发表不负责任的言论，特别是在第二届“”一带一路”国际高峰合作论坛之前，有关的论调更是来势汹汹，甚嚣尘上。结果怎么样？150个国家、92个国际组织、6000多名各国代表参加了第二届“一带一路”国际高峰合作论坛。这其中还包括50多名美国的代表。这是国际社会用国际行动对“一带一路”倡议投出的信任票和支持票，也是对美方言行的最好的回应。
			我们注意到这两天美方个别人士又开始老调重弹，继续对“一带一路”倡议进行攻击和抹黑，他们说得不累，我们听得都累了。我想提醒他们，不要高估自己的造谣能力，也不要低估他人的判断能力。如果他们愿意，就让他们继续去说，我们会继续加油干。到底谁是搅局者，谁是实干家，国际社会自有公论。
		</div>
		<input type="text" id="txt">
		<input type="button" value="查找" id="find">
		<input type="text" id="txt2">
		<input type="button" value="替换" id="rep">
	</body>
</html>

var box = document.getElementById("box");
	var txt = document.getElementById("txt");
	var txt2 = document.getElementById("txt2");
	var find = document.getElementById("find");
	var rep = document.getElementById("rep");
	var str = box.innerText;



//1. str.split(finder)方法将字符串以finder分割成数组,然后用join把数组以<span>"+replace+"</span>分割成字符串

	 	find.onclick=function(){
	 		var finder=txt.value;
	 		var replace=txt.value;
	 		var res = str.split(finder).join("<span>"+replace+"</span>");
	 		 box.innerHTML = res;
	 		 rep.onclick=function(){
	 			var finder=txt.value;
	 			var replace=txt2.value;
	 			var res = str.split(finder).join("<span>"+replace+"</span>");
	 			box.innerHTML = res;
	 		 }
	 	}


//2.str.replace


	find.onclick = function() {
		var finder = txt.value;
		var repeat = txt2.value;
		var reg = new RegExp(finder, "g");
		var res = str.replace(reg, "<span>" + finder + "</span>");
		box.innerHTML = res;
		rep.onclick = function() {
			var finder = txt.value;
			var repeat = txt2.value;
			var reg = new RegExp(finder, "g");
			var res = str.replace(reg, "<span>" + repeat + "</span>");
			box.innerHTML = res;
		}
	}

马晨宇

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js--文本查找替换

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box { width: 400px; height: 400px; border...
复制链接

扫一扫