JavaScript文字查询替换重置效果

 使用ES6

CSS样式设置

<style>
        html.body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #box {
            width: 600px;
            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: 60px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        #box #header .but2 {
            width: 60px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        #box #header .but3 {
            width: 60px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        #text {
            margin-top: 15px;
            font-size: 13px;
            text-indent: 20px;
            /*首行缩进20px*/
        }

        .s1 {
            background: skyblue;
        }

        .s2 {
            background: pink;
        }
    </style>

HTML

<div id="box">
        <div id="header">
            <input name="search" type="text" placeholder="搜索内容" class="search" />
            <button class="btn1">搜索</button>
            <input name="replace" type="text" placeholder="替换内容" class="replace" />
            <button class="btn2">替换</button>
            <button class="btn3">重置</button>
        </div>
        <div id="text">
            <p>张家界，原名大庸市，湖南省辖地级市，辖2个市辖区(永定区、武陵源区)、2个县(慈利县、桑植县)。位于湖南西北部，澧水中上游，属武陵山区腹地，
                张家界因旅游建市，是中国重要的旅游城市之一是湘鄂渝黔革命根据地的发源地和中心区域。</p>
            <p>1982年9月，张家界国家森林公园为第一个国家森林公园</p>
            <p>1988年8月，张家界 武陵源被列入国家第二批40处重点风景名胜区之内。1992年，
                由张家界武陵源自然风景区被联合国教科文组织列入《世界自然遗产名录》</p>
        </div>
    </div>

JavaScript部分

写法1

<script>
        const oIptSearch = document.querySelector('input:first-child');
        const oIptReplace = document.querySelector('#header input:nth-child(3)')
        const oBtn1=document.querySelector('.btn1');
        const oBtn2=document.querySelector('.btn2');
        const oBtn3=document.querySelector('.btn3')
        var oText = document.querySelector("#text");
        var Oval = oText.innerHTML;

        oBtn1.addEventListener('click', () => {
            let keyword = oIptSearch.value;
           oText.innerHTML =  Oval.replace(new RegExp(keyword,'g'),`<em style="background:red">${keyword}</em>`)
        })
        oBtn2.addEventListener('click',()=>{
            let keyword = oIptSearch.value;
            let replaced = oIptReplace.value;
            oText.innerHTML=Oval.replace(new RegExp(keyword,'g'),`<em style="background:pink">${replaced}</em>`)
        })
        oBtn3.addEventListener('click',()=>{
            oText.innerHTML=Oval
        })      
    </script>