思路:将文字拆分再拼接
- 通过查找的字符串将整个字符串进行分割,返回数组
- 循环数组,并给查找的字符串加上高亮标签
注意点:再拼接高亮标签时千万不要循环数组每一个去拼接,这样数组最后会多一位高亮标签。直接使用join()方法进行拼接,把要拼接的标签和字符放进去即可。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查找替换文字</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="box">
<div id="content">
目前主要针对的是javascript培训,同时还提供了css教程、javascript视频、js特效等,最新推出了外地学员们喜欢的javascript网络课程服务,同时还为处于javascript入门阶段的朋友录制了大量javascript视频,其中涉及了大量javascript基础知识,希望妙味课堂推出的javascript网络培训课程能带给大家更多惊喜。目前主要针对的是javascript培训,同时还提供了css教程、javascript视频、js特效等,最新推出了外地学员们喜欢的javascript网络课程服务,同时还为处于javascript入门阶段的朋友录制了大量javascript视频,其中涉及了大量javascript基础知识,希望妙味课堂推出的javascript网络培训课程能带给大家更多惊喜。目前主要针对的是javascript培训。
</div>
<div id="open">
<a class="unfold" href="javascript:;">展开</a>
<ul style="display: none;">
<li><a href="javascript:;" class="searchA">查找</a></li>
<li><a href="javascript:;" class="replaceA">替换</a></li>
</ul>
</div>
<div id="fun" style="display: none;">
<div class="btns">
<a href="javascript:;" class="active searchFun">查找</a>
<a href="javascript:;" class="replaceFun">替换</a>
</div>
<div id="search" style="display: none;">
<input class="searchTxt" type="text" />
<input class="searchBtn" type="button" value="" />
</div>
<div id="replace">
<input class="repOldTxt" type="text" />
<input class="repNewTxt" type="text" />
<input class="replaceBtn" type="button" value="" />
</div>
</div>
</div>
<script type="text/javascript">
(function(){
/*
思路:
通过查找的字符串将整个字符串进行分割,返回数组
循环数组,并给查找的字符串加上高亮标签
*/
var box = document.querySelector("#box");
var cont = box.querySelector("#content");
var contVal = cont.innerHTML;
var open = box.querySelector("#open");
var unfold = box.querySelector(".unfold");
var openUl = box.querySelector("#open ul");
var searchA = box.querySelector("#open .searchA");
var replaceA = box.querySelector("#open .replaceA");
var fun = box.querySelector("#fun");
var search = fun.querySelector("#search");
var replace = fun.querySelector("#replace");
var searchFun = fun.querySelector(".btns .searchFun");
var replaceFun = fun.querySelector(".btns .replaceFun");
//查找功能
var searchTxt = search.querySelector(".searchTxt");
var searchBtn = search.querySelector(".searchBtn");
//替换功能
var repOldTxt = replace.querySelector(".repOldTxt");
var repNewTxt = replace.querySelector(".repNewTxt");
var replaceBtn = replace.querySelector(".replaceBtn");
//点击展开时,查找和替换ul显示
unfold.onclick = function(){
openUl.style.display = "block";
};
//点击右侧查找按钮,将fun div 显示,并显示查找div
searchFun.onclick = searchA.onclick = function(){
fun.style.display = "block";
search.style.display = "block";
//有可能点击替换后再次点击查找按钮
replace.style.display = "none";
};
//点击右侧替换按钮,将fun div 显示,并显示替换div。且将查找的active清除,并给替换加上active
replaceFun.onclick = replaceA.onclick = function(){
fun.style.display = "block";
search.style.display = "none";
replace.style.display = "block";
};
//查找功能实现
searchBtn.onclick = function(){
var searchVal = searchTxt.value;
if(searchVal === ""){
alert("请输入需要查找的文字");
return;
}
var searchArr = contVal.split(searchVal);
// var spanStr = "";
//将数组每位加上高亮标签后再连接
// searchArr.forEach(function(item){
// spanStr += item + "<span>"+ searchVal +"</span>";
// });
//将得到的数组再转为字符串
searchArr.join("<span>"+ searchVal +"</span>");
cont.innerHTML = searchArr.join("<span>"+ searchVal +"</span>");
}
//替换功能实现
replaceBtn.onclick = function(){
var repOld = repOldTxt.value;
var repNew = repNewTxt.value;
if(repOld === ""){
alert("请输入需要查找的文字");
return;
}
if(repNew === ""){
alert("请输入需要替换的文字");
return;
}
var searchArr = contVal.split(repOld);
// var spanStr = "";
//将数组每位加上高亮标签后再连接
// searchArr.forEach(function(item){
// spanStr += item + "<span>"+ repNew +"</span>";
// });
//将得到的数组再转为字符串
searchArr.join("<span>"+ repNew +"</span>");
cont.innerHTML = searchArr.join("<span>"+ repNew +"</span>");
}
})();
</script>
</body>
</html>
CSS样式文件:
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
}
input {
padding: 0;
}
li {
list-style: none;
}
#box {
width: 800px;
height: 700px;
margin: 0 auto;
position: relative;
background-image: url(./images/bg.png);
background-repeat: no-repeat;
}
#content {
position: absolute;
top: 162px;
left: 140px;
width: 400px;
font-size: 14px;
padding: 18px;
box-sizing: border-box;
color: #004654;
border: solid 1px #abdde7;
border-radius: 2px;
background: #eef8fa;
line-height: 1.5;
}
#open {
position: absolute;
top: 162px;
right: 140px;
text-align: center;
vertical-align: bottom;
}
#open a {
display: block;
width: 100px;
height: 80px;
line-height: 120px;
border-radius: 2px;
}
#open>a {
background-color: #90e2f2;
color: white;
background-image: url(./images/add.png);
background-repeat: no-repeat;
background-position: 50% 25%;
}
#open li a {
/* background-color: #C0C0C0; */
color: #fff;
margin-top: 24px;
}
#open li:nth-child(1) a {
background-color: #a8a6f5;
background-image: url(./images/search.png);
background-repeat: no-repeat;
background-position: 50% 25%;
}
#open li:nth-child(2) a {
background-color: #9fe7a9;
background-image: url(./images/change.png);
background-repeat: no-repeat;
background-position: 50% 25%;
}
#fun {
position: absolute;
width: 570px;
height: 158px;
bottom: 62px;
left: 115px;
background-color: #ffffff;
padding: 25px;
box-sizing: border-box;
border-radius: 10px;
}
#fun .btns {
/* width: 570px;
margin: 0 auto;
height: 50px;
border-bottom: 2px solid #E73100; */
}
#fun .btns a {
display: inline-block;
width: 100px;
height: 40px;
text-align: center;
color: #fff;
line-height: 40px;
border-radius: 2px;
}
#fun .btns a:nth-child(1) {
background-color: #a8a6f5;
}
#fun .btns a:nth-child(2) {
background-color: #9fe7a9;
margin-left: 20px;
}
#search,
#replace {
height: 30px;
display: none;
margin-top: 14px;
}
#search input:nth-child(2) {
background-color: #a8a6f5;
background-image: url(./images/search.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#replace input:nth-child(3) {
background-color: #9fe7a9;
background-image: url(./images/change.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#fun input {
height: 25px;
width: 170px;
background-color: #eef8fa;
border: solid 1px #abdde7;
border-radius: 2px;
height: 46px;
}
/* #fun input:focus {
outline-color: #E73100;
} */
#fun input[type="button"] {
width: 100px;
vertical-align: bottom;
border: none;
}
span {
background-color: #FFFF00;
}
结果: