原生js實現replace方法

Honwhy 發布于2019-08-01 18:43 / 2920人閱讀

摘要：今天看到有人提問的方法怎么實現的，自己就試了試手冊里的對象的介紹大概是這樣第一個參數聲明了要替換的模式的對象。第二個參數一個字符串，聲明的是替換文本或生成替換文本的函數。在調用非全局對象的方法時，返回的數組與調用方法返回的方法相同。

今天看到有人提問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)

GPU云服務器云服務器 js中的replace方法原生js實現 ajax原生js實現原生js實現addclass

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52055.html

原生js實現replace方法

摘要：今天看到有人提問的方法怎么實現的，自己就試了試手冊里的對象的介紹大概是這樣第一個參數聲明了要替換的模式的對象。第二個參數一個字符串，聲明的是替換文本或生成替換文本的函數。在調用非全局對象的方法時，返回的數組與調用方法返回的方法相同。今天看到有人提問js的replace方法怎么實現的，自己就試了試js手冊里的String對象的介紹replace大概是這樣： string.replac...

teren 2019-08-22 15:38 評論0 收藏0
14行實現js原生語法前端模板引擎

最近開發前端一直用的前端模板引擎；一直使用的 TPPL 模板引擎源代碼如下： function tppl(tpl, _data) { tpl = tpl.replace(/()/g, >); var data = _data || {}; if (typeof data !== object) { console.log(TEFinal -> data ...

hyuan 2019-08-21 17:45 評論0 收藏0
用原生 JS 實現 MVVM 框架2——單向綁定

摘要：上一篇寫了實現框架的一些基本概念本篇用代碼來實現一個完整的框架思考假設有如下代碼，里面的會和試圖中的一一映射，修改的值，會直接引起試圖中對應數據的變化如何實現上述呢回想下這篇講的觀察者模式和數據監聽主題是什么觀察者是什么觀察者何時訂閱主題主上一篇寫了實現 MVVM 框架的一些基本概念本篇用代碼來實現一個完整的 MVVM 框架思考假設有如下代碼，data里面的name會和試圖中的...

Zoom 2019-08-23 11:39 評論0 收藏0
放棄jQuery, 使用原生js

摘要：隨著的逐漸淘汰，的興起，以及側重點放在了移動端，可能變的不在那么重要，原生一樣很好用。下面介紹幾個原生替換的方法。隨著IE6、7、8的逐漸淘汰，HTML5的興起，以及側重點放在了移動端，jQuery可能變的不在那么重要，原生一樣很好用。下面介紹幾個原生替換jq的方法。獲取元素 //jQuery $(.xxx); //class獲取 $(#xxx); //id獲取 $(....

mumumu 2019-08-23 14:27 評論0 收藏0