实现效果
- 页面内有搜索、替换、重置三个按钮
- 通过输入框输入想要查找和替换的内容，实现文本内容的替换
- 搜索到说的要替换的内容需要改变背景颜色
- 点击重置按钮，文本初始化
- 容错机制：
- 搜索内容不能为空，为空时弹出提示框
- 搜索的内容必须是文本中已存在的，搜索文本中不存在的内容时，弹出提示框
- 替换内容不能为空，为空时弹出提示框
- 替换时，不能输入和替换前一样的内容，替换前后内容一样时，弹出提示框
图片展示
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html.body {width: 100%;height: 100%;margin: 0;padding: 0;}
#box {width: 485px;height: 240px;border: 1px solid #000; margin: 10px auto;}
#box #header {margin-top: 30px; margin-left: 30px;}
#box #header .search {width: 140px;height: 30px;line-height: 30px;text-align: center;}
#box #header .replace {width: 140px;height: 30px;line-height: 30px;text-align: center;}
#box #header .but1 {width: 40px;height: 30px;line-height: 30px; text-align: center;}
#box #header .but2 {width: 40px;height: 30px; line-height: 30px;text-align: center;}
#box #header .but3 { width: 40px;height: 30px;line-height: 30px;text-align: center;}
#text {margin-top: 15px;font-size: 13px;text-indent: 20px;}
</style>
</head>
<body>
<div id="box">
<div id="header">
<input type="text" placeholder="搜索内容" class="search" />
<input type="button" value="搜索" class="but1" />
<input type="text" placeholder="替换内容" class="replace" />
<input type="button" value="替换" class="but2" />
<input type="button" value="重置" class="but3" />
</div>
<div id="text">
<p>泰山是我国的“五岳”之首，又称岱山、岱宗、岱岳、东岳、泰岳等。名称之多，实为全国名山之冠。春秋时改称泰山。
泰山前邻孔子故里曲阜，背依泉城济南，面积达426平方千米，主峰玉皇顶海拔1532.7米，气势雄伟，拔地而起，
有“天下第一山”之美誉。</p>
<p>1987年泰山被联合国教科文组织列入世界自然文化遗产名录。</p>
<p>几千年来，泰山成为历代帝王封禅祭天的神山，随着帝王封禅，泰山被神化，因而又享有“五岳之长”的称号。</p>
</div>
</div>
<script>
// 1.获取标签对象和数据信息
// 文字内容标签
var oText = document.querySelector('#text');
// 输入搜索内容input标签
var oIptSear = document.querySelector('[class="search"]');
// 输入替换内容input标签
var oIptRep = document.querySelector('[class="replace"]');
// 获取搜索button按钮
var oBtnSear = document.querySelector('.but1');
// 获取替换button按钮
var oBtnRep = document.querySelector('.but2');
// 获取替换button按钮
var oBtnRes = document.querySelector('.but3');
// 建立变量,存储标签中的原始内容
var str = oText.innerHTML;
// 建立变量,存储执行替换之后的内容
var repStr = '';
// 2.给3个按钮添加点击事件
// (1)给搜索按钮添加事件
oBtnSear.addEventListener('click', function () {
// 1.获取搜索input中的数据
var val = oIptSear.value;
// 2.定义正则表达式,因为有变量要解析,只能写成模板字符串形式
// 现在是字符串形式,要执行时必须使用 eval() 来执行字符串形式的正则表达式
var reg = `/${val}/g`;
// 3.做容错验证
// 可以写非空判断,如果输入内容是空字符串,不执行之后的程序
if (val === '') {
window.alert('搜索内容不能为空');
return;
}
// 如果没有匹配的内容,提示并且不执行之后的程序(return)
// eval(reg).test(str) === false !eval(reg).test(str)
// 如果 repStr 为空字符串,证明没有执行过替换,搜索的是原始字符串
// 如果 repStr 不是空字符串,证明执行过替换,搜索的是替换后的字符串
if (repStr == '') {
if (eval(reg).test(str) === false) {
window.alert('没有符合的内容');
return;
}
} else {
if (eval(reg).test(repStr) === false) {
window.alert('没有符合的内容');
return;
}
}
// 执行查找效果,将匹配查找的内容,替换为标签,并且添加样式
// str存储的原始内容要执行重置效果,要定义新的变量来存储替换之后的内容
// 如果 repStr 为空字符串,证明没有执行过替换,搜索原始内容
// 如果 repStr 不是空字符串,证明执行过替换,搜索 repStr 内容
if(repStr === ''){
var newStr = str.replace(eval(reg), `<span style="background:yellow">${val}</span>`);
}else{
var newStr = repStr.replace(eval(reg), `<span style="background:yellow">${val}</span>`);
}
// 将新的字符串,写入标签
oText.innerHTML = newStr;
})
//(2) 给替换按钮添加事件
oBtnRep.addEventListener('click', function () {
// 1.获取数据
// 搜索input的数据
var valSear = oIptSear.value;
// 替换input的数据
var valRep = oIptRep.value;
// 2.定义正则表达式
var reg = `/${valSear}/g`;
// 3.容错验证
// 可以写非空判断,如果输入内容是空字符串,不执行之后的程序
//写前三个if的目的是：当输入搜索内容后，不点击搜索，直接点击替换时的提示内容
if (valSear === '') {
window.alert('搜索内容不能为空');
return;
}
// 如果没有匹配的内容,提示并且不执行之后的程序
if (repStr == '') {
if (str.indexOf(valSear) === -1) {
window.alert('没有搜索到匹配内容');
return;
}
} else {
if (repStr.indexOf(valSear) === -1) {
window.alert('没有搜索到匹配内容');
return;
}
}
if (valRep === '') {
window.alert('替换内容不能为空');
return;
}
if(valSear == valRep){
window.alert('和替换前的内容一样，请重新输入');
return;
}
// 执行替换操作。将搜索的内容,替换为替换的内容
// 在原始数据中查询匹配
// 定义一个新的变量,来存储执行结果
// 如果 repStr 为空字符串,证明没有执行过替换,替换原始内容
// 如果 repStr 不是空字符串,证明执行过替换,替换 repStr 内容
if(repStr === ''){
var newStr = str.replace(eval(reg), valRep);
}else{
var newStr = repStr.replace(eval(reg), valRep);
}
// 将结果写入
oText.innerHTML = newStr;
// 将结果存储在 repStr 中
repStr = newStr;
})
// （3）给重置添加事件
// 点击恢复原始内容
oBtnRes.addEventListener('click', function () {
// 将内容恢复到原始内容
oText.innerHTML = str;
// 给 repStr 重新赋值 空字符串
repStr = '';
// 给两个input标签,定义空内容
oIptRep.value = '';
oIptSear.value = '';
})
</script>
</body>
</html>
不能放视频~，所以就不展示效果啦！
