JavaScript string 的replace

在使用JavaScript對字串進行處理的時候我們經常會用到replace方法，很簡單的一個方法，以前一直不以為意，直到今天看JavaScript語言精粹的時候讀到了一個有趣的小例子的時候，並不是十分理解，瞭解了一下replace的用法才明白，原來replace不像想象中的那麼簡單。

replace() 方法用於在字串中用一些字元替換另一些字元，或替換一個與Regex匹配的子串。

文法：string.replace(subStr/reg,replaceStr/function)

第一個參數可以是字串的子字串，也可以是一個Regex，第二個參數可以是一個字串或者一個處理方法，下面我們分別看看

document.write('1234'.replace(1, 'X'));

我們可以得到結果：X234，很正常，但是

document.write('1214'.replace(1, 'X'));

我們預想結果應該是：X2X4，但是得到的結果卻是：X214，也就是說如果我們第一個參數寫的是子字串，那麼replace只替換第一個匹配就停止搜尋

我們換為正則的寫法

document.write('1214'.replace(/1/g, 'X'));

這時候我們可以得到預想結果：X2X4

我們看看function的寫法

var r = 'abcd'.replace(/\w/g, function() {            return 'X';        });        document.write(r);

這時我們可以看到預想結果：XXXX，所有字元被替換為X，這是我之前對replace的認識，但我在JavaScript語言精粹上看到這樣一個例子，我迷惑了

var t = document.getElementById('t');        String.prototype.deentityfy = function() {            var entity = {                quot: '"',                lt: '<',                gt: '>'            };            return function() {                return this.replace(/&([^&;]+);/g, function(a, b) {                   var r = entity[b];                    return typeof r === 'string' ? r : a;                }); //end of replace            };        } ();        document.write('&lt;&quot;&gt;'.deentityfy());

這段代碼是為JavaScript的String對象添加一個deentityfy 方法，用以替換字串中得HTML字元（把&quot;替換為”,&lt;替換為<，&gt;替換為>），我們先忽略作者使用的語言技巧，看看他的replace是怎麼用的，第一個參數是一個Regex，是匹配之前提到的三個字串，第二個參數的function竟然有了兩個參數，這兩個參數到底是什嗎？為什麼方法卻得到了預想結果，我們來簡單分析一下。

首先entity[b]是JavaScript關聯陣列的用法，根據數組資料的name得到value，為了方便理解，我們不妨改造一下這個方法，讓它變得簡單些，讓我們可以更清楚地看到function的參數到底是什麼，同時為了消除瀏覽器轉碼問題，我們修改一下替換字串

String.prototype.deentityfy = function() {
         var entity = {

             a: 'A',

             b: 'B',

             c: 'C'

         };

         return function() {

             return this.replace(/1([^12])2/g, function(a, b) {

                 for (var i = 0; i < arguments.length; i++) {

                     document.write(arguments[i] + '<br/>');

                 }

                 document.write('===========================<br/>');

                 var r = entity[b];

                 return typeof r === 'string' ? r : a;

             }); //end of replace

         };

     } ();

     document.write('1a21b21c2'.deentityfy());

這樣，我們把方法的參數都列印出來，看看結果是什麼

1a2
a

0

1a21b21c2

===========================

1b2

b

3

1a21b21c2

===========================

1c2

c

6

1a21b21c2

===========================

ABC

很奇怪對不對，最後的<”>是方法的結果，很正確，得到了預期結果，讓我們看看function的參數部分，

function被調用了3次，恰恰是匹配的次數，每次都置換匹配字串。

每次調用的時候方法有四個參數

第一個參數很簡單，是匹配字串

第二個很詭異，不過每個都看一遍不難得出，第二個參數是Regex括弧內的匹配的內容

第三個參數和容易想到，是匹配項在字串中的index

第四個參數則是原字串

很神奇對不對，但是不是就是這樣了呢，我們再寫一個試試

var r = '1a21b21c2'.replace(/1\w2/g, function() {            for (var i = 0; i < arguments.length; i++) {                document.write(arguments[i] + '<br/>');            }            document.write('===========================<br/>')            return 'X';        });        document.write(r);

和前面例子很像，只是簡單的把所有匹配項替換為了X，看看結果

 

 1a201a21b21c2===========================1b231a21b21c2===========================1c261a21b21c2===========================XXX

出乎意料對不對，結果是預期的，但是參數少了一個，第二項參數不見了，看看究竟還有什麼不同——Regex中看似多餘的括弧不見了，上一個例子中，第二項參數恰恰是括弧內的匹配項，是不是第二個參數就是Regex中括弧內的匹配項呢，我們把括弧加回來驗證一下

var r = '1a21b21c2'.replace(/1(\w2)/g, function() {            for (var i = 0; i < arguments.length; i++) {                document.write(arguments[i] + '<br/>');            }            document.write('===========================<br/>')            return 'X';        });        document.write(r);

看看結果

  1a2a201a21b21c2===========================1b2b231a21b21c2===========================1c2c261a21b21c2===========================XXX

果不其然，這樣我們就瞭解了function中到底有哪些參數，現在看看JavaScript語言精粹重的例子就應該明白了，當然我們需要知道關聯陣列，立即執行函數，閉包和arguments對象，如果讓我們把一句話中所有的單字首大寫，是不是會了呢

//方法很多，這個只是驗證我們剛才的理論才故意寫成這樣麻煩的做法 var sentence = 'i love you';        var upper = sentence.replace(/(\w)\w*\b/g, function(a,b) {            return b.toUpperCase()+a.substring(1);        });        document.write(upper);

//這樣寫其實已經可以勝任  var sentence = 'i love you';        var upper = sentence.replace(/\w+\b/g, function(a) {            return a.substr(0,1).toUpperCase()+a.substring(1);        });        document.write(upper);