使用正则表达式,实现文档关键字的搜索与替换

最新推荐文章于 2023-12-04 16:00:00 发布

yingying123450998

最新推荐文章于 2023-12-04 16:00:00 发布

阅读量1.2k

点赞数 4

文章标签：正则表达式 javascript 前端

本文链接：https://blog.csdn.net/chengxuyuanying/article/details/122695009

版权

<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> 

    <script>
        //  获取标签对象

        //  获取父级标签对象 
        const oBox = document.querySelector('#box');

        //  获取 两个input标签
        const oIptSearch = oBox.querySelector('.search');
        const oIptReplace = oBox.querySelector('.replace');

        //  获取 按个button标签
        const oBtnSearch = oBox.querySelector('.btn1');
        const oBtnReplace = oBox.querySelector('.btn2');
        const oBtnReset = oBox.querySelector('.btn3');

        //  获取 内容div标签
        const oDivText = oBox.querySelector('#text');
        
        //  获取 内容div标签的原始内容
        let oldStr = oDivText.innerHTML ; 
        let str = oldStr ;

        //  给 搜索input标签 添加点击事件
        oBtnSearch.addEventListener('click' , function(){
            // 获取 搜索input标签 中 搜索关键词
            let searchCode = oIptSearch.value ;
            console.log( searchCode );

            // 使用模板字符串 解析带有变量的正则表达式
            let reg = `/${searchCode}/g`;

            // 将关键词 调换为 带有标签的关键词
            // 使用 eval() 执行 正则的字符串
            
            // 使用变量 存储 字符串替换结果 
            // 不修改 原始内容变量oldStr 中存储的字符串的原始内容
            let res = oldStr.replace( eval( reg ) , `<span style="background:pink">${searchCode}</span>` );

            // 将替换结果的标签 写入 内容div中
            oDivText.innerHTML = res ;

            console.log( oldStr );
        })

        // 给 替换input标签 添加点击事件
        oBtnReplace.addEventListener('click' , function(){
            // 获取 两个关键词 
            let oldCode = oIptSearch.value;
            let newCode = oIptReplace.value;

            // 使用模板字符串解析正则表达式
            let reg = `/${oldCode}/g` ;

            // 完成字符串替换功能
            let res1 = oldStr.replace( eval( reg ) , `<span style="background:skyblue">${newCode}</span>` );
            
            // 修改原始字符串oldStr 中 存储的字符串内容
            // 将 原始内容替换为 新内容 但是没有span标签
            oldStr = oldStr.replace( eval( reg ) , newCode );

     

            // 将 替换的字符 写入到 内容div中
            oDivText.innerHTML = res1 ;
        
        
        })

        // 给 内容div中重新写入原始字符串内容 
        // 给 oldStr变量中 存储 原始字符串内容
        oBtnReset.addEventListener('click' , function(){
            oDivText.innerHTML = str;
            oldStr = str ;
        })
    </script>