<div id="box">
<div id="header">
<input name="search" type="text" placeholder="搜索内容" class="search"/>
<button class="but1">搜索</button>
<input type="text" placeholder="替换内容" class="replace"/>
<button class="but2">替换</button>
<button class="but3">重置</button>
</div>
<div id="text">
<p>张家界，原名大庸市，湖南省辖地级市，辖2个市辖区(永定区、武陵源区)、2个县(慈利县、桑植县)。位于湖南西北部，澧水中上游，属武陵山区腹地，
张家界因旅游建市，是中国重要的旅游城市之一是湘鄂渝黔革命根据地的发源地和中心区域。</p>
<p>1982年9月，张家界国家森林公园为第一个国家森林公园</p>
<p>1988年8月，张家界 武陵源被列入国家第二批40处重点风景名胜区之内。1992年，
由张家界武陵源自然风景区被联合国教科文组织列入《世界自然遗产名录》</p>
</div>
</div>
<script>
// 搜索,替换
// 搜索:
// 触发事件:
// 获取输入框的参数
// 在字符串中,全局匹配,查询关键词
// 将关键词替换为 span标签嵌套关键词
// 通过css操作,或者通过标签行内css样式,添加背景颜色等
// 正则表达式:
// 不会解析变量 let str = a
// /str/ 会认为是 str 不会认为是 a
// 定义 正则表达式 存储在 变量中 eval(变量) 解析变量中存储的正则表达式
// 就可以将有变量参与的正则表达式,正确解析执行
// 获取button标签对象
const oBtnSearch = document.querySelectorAll('button')[0];
const oBtnReplace = document.querySelectorAll('button')[1];
const oBtnReset = document.querySelectorAll('button')[2];
// 获取input标签对象
const oIptSearch = document.querySelectorAll('input')[0];
const oIptReplace = document.querySelectorAll('input')[1];
// 获取所有内容
const oTextDiv = document.querySelector('#text');
// 原始字符串内容
let text = oTextDiv.innerHTML;
// 定义一个变量,专门存储每次替换之后,新的字符串内容
// 定义全局作用域变量,每个函数都可以使用
let newText = text;
// 1,搜索效果
oBtnSearch.addEventListener('click' , ()=>{
// 1,获取搜索关键词
let keyWord = oIptSearch.value;
// 2,在所有内容中,查找替换关键词
// 定义正则表达式 使用模板字符串定义 可以解析变量
let reg = `/${keyWord}/g`;
// if判断 如果 所有内容中没有匹配的字符
// 就终止之后的程序执行,弹出提示信息
// 内容中,没有匹配关键词的内容
// 特别强调 : 凡是 带有变量的模板字符串 正则表达式
// 必须使用 eval(正则表达式) 方式来执行
if( eval(reg).test(newText) === false ){
window.alert('没有搜索到匹配内容');
// 这里执行return,作为终止函数中之后程序的执行
// 做终止操作
return;
}
// 执行替换操作
// 将正则表达式,作为参数,定义给 replace() 方法函数
// 直接定义 replace() 不会解析 模板字符串
// 必须写成 eval( `/${keyWord}/g` )
// eval() 会解析 模板字符串,并且按照 正则表达式 在 replace() 中执行
newText = newText.replace( eval(reg) , `<span style="background:red">${keyWord}</span>` )
// 将替换后的新的字符串,写入到页面中
oTextDiv.innerHTML = newText;
})
// 2,替换效果
oBtnReplace.addEventListener('click' , ()=>{
// 获取两个input中输入的数据
let keyWord = oIptSearch.value;
let repWord = oIptReplace.value;
// 定义正则表达式
let reg = `/${keyWord}/g`;
// if判断,如果没有匹配内容,就不执行替换操作
if( eval(reg).test(newText) === false ){
window.alert('没有匹配内容');
return;
}
// 全局替换
newText = newText.replace( eval(reg) , `<span style="background:pink">${repWord}</span>` )
// 将新字符串,写入到页面中
oTextDiv.innerHTML = newText;
})
// 3,重置效果
oBtnReset.addEventListener('click' , ()=>{
// 将原始字符串内容,写入到页面中
oTextDiv.innerHTML = text;
})
</script>