js正则替换

最新推荐文章于 2023-04-21 13:11:05 发布

毕霞晚梅

最新推荐文章于 2023-04-21 13:11:05 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/maybemetoo/article/details/105400669

版权

代码如下：

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

<style>
        html.body{
            width:100%;
            height:100%;
            margin:0;
            padding:0;
        }
        #box{
            width:485px;
            height:240px;
            border:1px solid #000;
            margin:40px;
        }
        #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;/*首行缩进20px*/
        }
    </style>

<script>
        // 步骤:
        //   1,获取需要查找的变量
        //   2,获取内容
        //   3,在内容中进行替换
        //   4,将替换好的内容,重新写入标签
        
        // 1,获取标签对象以及数据
        
        var oText = document.querySelector('#text');                    // 内容标签

        var oIptSear = document.querySelector('[name="search"]');       // 搜索input
        
        var oBtnSear = document.querySelector('[value="查找"]');        // 搜索button

        var oIptRep = document.querySelector('.replace');               //替换input

        var oBtnRep = document.querySelector('.but2');                  //替换button

        var oBtnReset = document.querySelector('.but3');                //重置button
        
        var strText = oText.innerHTML;                                  // 存储原文本内容
        
        var str = oText.innerHTML;                                      // 存储文本内容改变的所有相关内容

        // console.log(str);
        
        // 给button按钮添加事件
        oBtnSear.addEventListener('click' , function(){
            
            var val = oIptSear.value;  // 获得搜索input的数据
        
            var reg = `/${val}/g`;  //利用正则匹配找到搜索框里的数据，本质是字符串，通过模板字符串,解析获取到的input数据变量，传入时要用eval()进行解析成正则

            // 判断文本内容中是否存在搜索框中数据，不存在弹出提示框并返回
            // 有内容是 true  没有内容 false
            // 没有内容,false 取反! 结果是 true 执行代码
            if( !( eval(reg).test(str) ) ){
                
                window.alert('没有符合的内容');        

                return;
            }

            // 用 eval() 来解析 reg ,执行正确的正则表达式
            str = str.replace( eval(reg) , `<span style="background:red">${val}</span>` ); // 搜索指定内容，添加样式
            
            oText.innerHTML = str; // 将字符串写到标签中
        })

        // 替换内容
        oBtnRep.addEventListener('click' , function(){
            var repVal = oIptRep.value; //替换的内容

            var val = oIptSear.value;   //搜索的内容

            var reg = `/${val}/g`;  //利用正则匹配找到搜索框里的数据，本质是字符串，通过模板字符串,解析获取到的input数据变量，传入时要用eval()进行解析成正则

            // 判断文本内容中是否存在搜索框中数据，不存在弹出提示框并返回
            if( !( eval(reg).test(str) ) ){
                
                window.alert('原文章中没有符合的内容');
                
                return;
            }
            // 全局替换搜索数据
            str = str.replace(eval(reg) , `<span style="background:blue">${repVal}</span>`);

            oText.innerHTML = str;
        })

        // 重置
        oBtnReset.addEventListener('click' , function(){
            // 方法一：
            // 重新赋值文本内容
            // oText.innerHTML = strText;  
            // str = strText;

            // 方法2：用替换内容  替换  查找内容

            var repVal = oIptRep.value; //替换的内容

            var val = oIptSear.value;   //搜索的内容

            var reg2 = `/${repVal}/g`;    //存储全局替换的内容

            str = str.replace(eval(reg2) , `<span style="background:white">${val}</span>`);

            oText.innerHTML = str;

        })
    </script>

执行效果
1.查找
在这里插入图片描述
如果查找内容存在

2.替换
判断查找内容是否存在

3.重置
文本内容恢复成原来未做替换时

毕霞晚梅

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
js正则替换

代码如下：<body> <div id="box"> <div id="header"> <input name="search" type="text" placeholder="查找内容" class="search"/> <input type="button" v...
复制链接

扫一扫