<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-family: "Microsoft YaHei", serif;
}
body, dl, dd, p, h1, h2, h3, h4, h5, h6 {
margin: 0;
}
ol, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none
}
#wrap{
width: 500px;
height: 250px;
margin: 100px auto;
border: 1px solid gray;
}
#wrap .bottom{
text-indent: 2em;
}
</style>
</head>
<body>
<div id="wrap">
<div class="top">
<input type="text">
<input type="button" value="搜索">
<input type="text">
<input type="button" value="替换">
<input type="button" value="重置">
</div>
<div class="bottom">
<p>张家界是湖南省辖地级市,原名大庸市,辖2个市辖区(永定区、武陵源区)、2个县(慈利县、桑植县)。位于湖南西北部,澧水中上游,属武陵山区腹地。[1] 张家界因旅游建市,是中国最重要的旅游城市之一,是湘鄂渝黔革命根据地的发源地和中心区域。</p>
<p>1982年9月,张家界国家森林公园成为中国第一个国家森林公园。</p>
<p>1988年8月,张家界武陵源风景名胜区被列入国家重点风景名胜区;1992年,由张家界国家森林公园等三大景区构成的武陵源风景名胜区被联合国教科文组织列入《世界自然遗产名录》;2004年2月,被列入全球首批《世界地质公园》;2007年,被列入中国首批国家5A级旅游景区。[2]</p>
</div>
</div>
<script>
(function () {
let aInput = document.querySelectorAll("#wrap .top input");
let aP = document.querySelectorAll("#wrap .bottom p");
let arr = [];
// 想要做重置,需要先把初始的东西存起来
aP.forEach(function (ele) {
arr.push(ele.innerText)
});
aInput[1].onclick = function(){
let val = aInput[0].value;
if (!val) return;
aP.forEach(function(ele,i) {
ele.innerHTML = ele.innerText.split(val).join("<b>"+val+"</b>")
});
aInput[0].value = "";
};
aInput[3].onclick = function () {
let val1 = aInput[0].value;
let val2 = aInput[2].value;
if (!val1 || !val2)return;
aP.forEach(function (ele,i) {
ele.innerHTML = ele.innerText.split(val1).join("<b>" + val2 + "</b>")
});
aInput[0].value = "";
aInput[2].value = "";
};
aInput[4].onclick = function () {
aP.forEach(function (ele,i) {
ele.innerText = arr[i];
});
aInput[0].value = "";
aInput[2].value = "";
};
})();
</script>
</body>
</html>
Python3Turtle