在一段文字中的查找修改删除（string类和数组类函数的应用）

本文链接：https://blog.csdn.net/qq_37199582/article/details/79439458
先来看看具体效果
<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>查找、替换、删除</title>
	<style>html,
body {
	margin: 0;
	padding: 0;
	background: #EFEFE7;
}

p {
	background: #fff;
	width: 600px;
	padding: 50px;
	font-family: '微软雅黑';
	font-size: 22px;
	line-height: 36px;
}

#wrap {
	width: 800px;
	margin: 50px auto;
	position: relative;
}

#buttons {
	width: 100px;
	position: absolute;
	right: 0;
	top: 0;
}

#buttons a {
	display: block;
	text-decoration: none;
	margin-bottom: 5px;
	color: #fff;
	width: 100px;
	height: 40px;
	line-height: 40px;
	background: #C0C0C0;
	text-align: center;
	display: none;
	font-weight: bold;
	font-family: '微软雅黑';
	font-size: 20px;
}

#buttons a:hover {
	background: #E76308;
}

#buttons a:first-child {
	background: #94948C;
	display: block;
}

#toolbox {
	border: 10px solid #E71063;
	width: 640px;
	padding: 20px;
	background: #E7E7B5;
	font-size: 0;
	display: none;
	position: relative;
}

#toolbox span {
	font-family: '微软雅黑';
	font-size: 20px;
	padding: 5px 20px;
	cursor: pointer;
}

#toolbox span.active {
	background: #E73100;
	color: #fff;
}

#search,
#replace {
	border-top: 3px solid #F7634A;
	margin-top: 3px;
}

#search input[type="text"],
#replace input[type="text"] {
	margin: 20px 0px;
	padding: 2px;
	height: 24px;
	width: 200px;
	font-size: 24px;
	margin-right: 10px;
}

#search input[type="button"],
#replace input[type="button"] {
	margin: 20px 0;
	height: 30px;
	width: 56px;
	font-size: 20px;
}

#close {
	font-size: 24px;
	position: absolute;
	right: 10px;
	top: 10px;
	cursor: pointer;
}</style>
	<script>window.onload = function() {
	var aBtn = document.getElementById('buttons').getElementsByTagName('a'),
		oToolbox = document.getElementById('toolbox'),
		oSearch = document.getElementById('search'),
		oReplace = document.getElementById('replace'),
		aSpan = oToolbox.getElementsByTagName('span'),
		searchBtn = oSearch.getElementsByTagName('input')[1],
		replaceBtn = oReplace.getElementsByTagName('input')[2],
		searchInput = oSearch.getElementsByTagName('input')[0],
		replaceInputs = oReplace.getElementsByTagName('input'),
		oClose = document.getElementById('close'),
		oP = document.getElementsByTagName('p')[0],
		str = oP.innerHTML;
     
     //点击显示选项按钮
	aBtn[0].onclick = function() {
		aBtn[1].style.display = 'block';
		aBtn[2].style.display = 'block';
	}
	
	aBtn[1].onclick = function() {
		clearBtns();
		searchShow();

	}
	aBtn[2].onclick = function() {
		clearBtns();
		replaceShow();
	}
	aSpan[0].onclick = searchShow;
	aSpan[1].onclick = replaceShow;
	//隐藏
	oClose.onclick = function() {
		oToolbox.style.display = 'none';
	}

	function searchShow() {
		oP.innerHTML = str;
		aSpan[0].className = 'active';
		aSpan[1].className = '';
		oSearch.style.display = 'block';
		oReplace.style.display = 'none';
	}

	function replaceShow() {
		oP.innerHTML = str;
		aSpan[1].className = 'active';
		aSpan[0].className = '';
		oSearch.style.display = 'none';
		oReplace.style.display = 'block';
	}

	function clearBtns() {
		aBtn[1].style.display = 'none';
		aBtn[2].style.display = 'none';
		oToolbox.style.display = 'block';
	}
	
	searchBtn.onclick = function() {
		if(!searchInput.value) {
			alert('请输入要查找的内容');
			oP.innerHTML = str;
		} else {
			if(str.indexOf(searchInput.value) == -1) {
				alert('对不起，没有找到您输入的【' + searchInput.value + '】');
				oP.innerHTML = str;
				searchInput.value = '';
			} else {
				oP.innerHTML = str;
				//split() 方法用于把一个字符串分割成字符串数组。
				var arr = str.split(searchInput.value);
				//join() 方法用于把数组中的所有元素放入一个字符串。
				oP.innerHTML = arr.join('<span style="background: yellow">' + searchInput.value + '</span>');
				searchInput.value = '';
			}
		}

	}
	replaceBtn.onclick = function() {
		if(!replaceInputs[0].value) {
			alert('请输入要替换的内容');
			oP.innerHTML = str;
		} else {
			if(str.indexOf(replaceInputs[0].value) == -1) {
				alert('对不起，没有找到您输入的【' + replaceInputs[0].value + '】');
			} else {
				if(!replaceInputs[1].value) {
					if(!confirm('您确定要删除输入的内容吗？')) {
						replaceInputs[0].value = '';
						return;
					}
				}
				oP.innerHTML = str;
				var arr = str.split(replaceInputs[0].value);
				oP.innerHTML = arr.join(replaceInputs[1].value);
				str = oP.innerHTML;
				replaceInputs[0].value = '';
				replaceInputs[1].value = '';
			}
		}

	}

}</script>
</head>
<body>
	<div id="wrap">
		<p>　“以前，我只为人生设定一个最高的目标，好象爬山的时候，一心只想爬到最高峰。但是，现在我了解，每时、每刻，都可以发现生命的美好。如同在爬山的路上，随时都能见到美丽的风景。”她强调：“巅峰不是人人可以到的，但每个人都有权利欣赏这一路上的风景！不论他是在山顶，还是山脚。”属于那个叛逆的年代，很多糗事、很多错事、很多没道理的事……但是，很美！</p>
		<div id="buttons">
			<a href="javascript:">展开</a>
			<a href="javascript:">查找</a>
			<a href="javascript:">替换</a>
			
		</div>
		<div id="toolbox">
			<div id="close">×</div>
			<span>查找</span>
			<span>替换</span>
			<div id="search">
				<input type="text"><input type="button" value="查找">
			</div>
			<div id="replace">
				<input type="text"><input type="text">
				<input type="button" value="替换">
			</div>
		</div>
	</div>
</body>
</html>