原生js实现replace方法

今天看到有人提问js的replace方法怎么实现的,自己就试了试
js手册里的String对象的介绍replace大概是这样:

 string.replace(regexp, replacement)

第一个参数:(regexp)

声明了要替换的模式的RegExp对象。如果该参数是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换成RegExp对象。

第二个参数(replacement)

一个字符串,声明的是替换文本或生成替换文本的函数。详见描述部分。

返回值

一个新字符串,是用replacemenc替换了与regexp的第一次匹配或所有匹配之后得到的。

我就试着实现了下一开始思路没考虑到正则,有很多问题,经过修改过的思路:

使用了正则的exec(),用split将匹配到的字符串作为参数把原字符串分割成若干数组,然后将字符串和替换的内容连接join起来就实现了

exec()将检索字符串string,从中得到与正则表达式regexp相匹配的文本。如果exec()找到了匹配的文本,它就会返回一个结果数组。否则,返回null。

匹配到的第一个数组[0]:匹配的文本,

第2个元素是与regexp的第二个子表达式相匹配的文本,以此类推。通常,数组的length属性声明的是数组中的元素个数。除了数组元素和length属性之外,exec()还返回两个属性。index属性声明的是匹配文本的第一个字符的位置。input属性指的就是string。在调用非全局RegExp对象的exec()方法时,返回的数组与调用方法String.match()返回的方法相同。
String.prototype.replaces=function(reg,str){
    var arr = [];
    var newStr= this;
    var i= '';
    //循环到 匹配不到替换的字符串为止
    while(reg.exec(newStr)!='null') {
        /**使用try,catch是因为在循环到匹配到所有!=null下次循
        环reg.exec(newStr)[0]会报错,循环完到报错时直接return结果**/
        try{
            arr = newStr.split(reg.exec(newStr)[0]);
            newStr = arr.join(str);
            //如果该正则式子不是全局正则(/g)不作循环直接修改一次返回
            if(!reg.global){
                return newStr;
            }
        }catch(e){
            return newStr;
        }
        
    }
    
} 

console.log("我是AbCd啊abcd啊abcd".replaces(/abcd/gi,'lipengpeng'))

----------------------------------------------------

经过测试,上面代码存在的问题如下:
当正则表达式是全局时(/g)时,且只匹配到一个,会直接返回原字符串,
在循环reg.exec(newStr)时,每次结果都不一样,这里暂时不清楚原因

修改后的:
String.prototype.replaces=function(reg,str){
    var arr = [];
    var newStr= this;
    var i= '';
    var d;
    //为了防止reg.exec()每次结果不一样,直接赋给一个变量
    //这里注意给d=reg.exec()加括号, “=”的优先级低
    while((d = reg.exec(newStr))!=null) {
        try{
            arr = newStr.split(d[0]);
            newStr = arr.join(str);
            if(reg.global){
                return newStr;
            }else{
                break;
            }
        }catch(e){
            console.log(e)
        }
        
    }
    
}

---------------------------------分割线-------------------------------------

以上代码继续测试后,发现如果正则匹配到不区分大小写(/i)且不开启全局匹配,结果会全局替换。添加非全局代码,不用管大小写在全局或非全局(正则已经处理过),最终代码:

    String.prototype.replaces = function(reg, str) {
        var arr = [];
        var newStr = this;
        var i = '';
        var d;
        while((d = reg.exec(newStr)) != null) {
            //debugger
            try {
                //console.log(d)
                if(reg.global) {
                    arr = newStr.split(d[0]);
                    newStr = arr.join(str);
                } else {
                    
                    var index = d['index'];
                    var lastindex = (+index) + (+d[0].length);
                    var preStr = newStr.slice(0, index);
                    var nextStr = newStr.slice(lastindex);
                    newStr = preStr + str + nextStr;
                    break;

                }

            } catch(e) {
                console.log(e)
            }

        }
        return newStr

    }

    var s = "我是A,c,a,cc,c,c,cc,a".replaces(/a/ig, 'b')
    console.log(s)
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为您提供一个简单的例子: HTML: ```html <div class="tab"> <button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button> <button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button> <button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button> </div> <div id="tab1" class="tabcontent"> <h3>Tab 1 Content</h3> <p>Some text...</p> </div> <div id="tab2" class="tabcontent"> <h3>Tab 2 Content</h3> <p>Some text...</p> </div> <div id="tab3" class="tabcontent"> <h3>Tab 3 Content</h3> <p>Some text...</p> </div> ``` CSS: ```css /* 隐藏所有tab内容 */ .tabcontent { display: none; } /* 标签页按钮样式 */ .tab button { background-color: #eee; border: none; color: black; padding: 10px 20px; cursor: pointer; } /* 激活的标签页按钮样式 */ .tab button.active { background-color: #ccc; } /* 标签页内容样式 */ .tabcontent { padding: 20px; border: 1px solid #ccc; } /* 第一个标签页默认显示 */ #tab1 { display: block; } ``` JavaScript: ```javascript function openTab(event, tabName) { // 获取所有的 tab 内容 var tabcontent = document.getElementsByClassName("tabcontent"); // 隐藏所有的 tab 内容 for (var i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // 获取所有的 tab 按钮 var tablinks = document.getElementsByClassName("tablinks"); // 将所有的 tab 按钮样式设置为非激活状态 for (var i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // 显示当前选中的 tab 内容 document.getElementById(tabName).style.display = "block"; // 设置当前选中的 tab 按钮为激活状态 event.currentTarget.className += " active"; } ``` 当用户点击任意一个标签页按钮时,`openTab`函数会被调用,隐藏所有标签页内容,将当前标签页内容设置为显示状态,同时将当前标签页按钮样式设置为激活状态。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值