快捷導(dǎo)航

關(guān)于JavaScript中string 的replace

更新時(shí)間：2013年04月12日 10:18:03 作者：

在使用JavaScript對(duì)字符串進(jìn)行處理的時(shí)候我們經(jīng)常會(huì)用到replace方法，很簡(jiǎn)單的一個(gè)方法，以前一直不以為意，直到今天看JavaScript語(yǔ)言精粹的時(shí)候讀到了一個(gè)有趣的小例子的時(shí)候，并不是十分理解，了解了一下replace的用法才明白，原來replace不像想象中的那么簡(jiǎn)單

replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個(gè)與正則表達(dá)式匹配的子串。

語(yǔ)法：string.replace(subStr/reg,replaceStr/function)

第一個(gè)參數(shù)可以是字符串的子字符串，也可以是一個(gè)正則表達(dá)式，第二個(gè)參數(shù)可以是一個(gè)字符串或者一個(gè)處理方法，下面我們分別看看

復(fù)制代碼代碼如下:

document.write('1234'.replace(1, 'X'));我們可以得到結(jié)果：X234，很正常，但是

復(fù)制代碼代碼如下:

document.write('1214'.replace(1, 'X'));我們預(yù)想結(jié)果應(yīng)該是：X2X4，但是得到的結(jié)果卻是：X214，也就是說如果我們第一個(gè)參數(shù)寫的是子字符串，那么replace只替換第一個(gè)匹配就停止搜索

我們換為正則的寫法

復(fù)制代碼代碼如下:

document.write('1214'.replace(/1/g, 'X'));這時(shí)候我們可以得到預(yù)想結(jié)果：X2X4

我們看看function的寫法

復(fù)制代碼代碼如下:

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

這時(shí)我們可以看到預(yù)想結(jié)果：XXXX，所有字符被替換為X，這是我之前對(duì)replace的認(rèn)識(shí)，但我在JavaScript語(yǔ)言精粹上看到這樣一個(gè)例子，我迷惑了

復(fù)制代碼代碼如下:

document.write('<">'.deentityfy());

這段代碼是為JavaScript的String對(duì)象添加一個(gè)deentityfy 方法，用以替換字符串中得HTML字符（把"替換為”,<替換為<，>替換為>），我們先忽略作者使用的語(yǔ)言技巧，看看他的replace是怎么用的，第一個(gè)參數(shù)是一個(gè)正則表達(dá)式，是匹配之前提到的三個(gè)字符串，第二個(gè)參數(shù)的function竟然有了兩個(gè)參數(shù)，這兩個(gè)參數(shù)到底是什么？為什么方法卻得到了預(yù)想結(jié)果，我們來簡(jiǎn)單分析一下。

首先entity[b]是JavaScript關(guān)聯(lián)數(shù)組的用法，根據(jù)數(shù)組數(shù)據(jù)的name得到value，為了方便理解，我們不妨改造一下這個(gè)方法，讓它變得簡(jiǎn)單些，讓我們可以更清楚地看到function的參數(shù)到底是什么，同時(shí)為了消除瀏覽器轉(zhuǎn)碼問題，我們修改一下替換字符串

復(fù)制代碼代碼如下:

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());

這樣，我們把方法的參數(shù)都打印出來，看看結(jié)果是什么

復(fù)制代碼代碼如下:

a2 
a 

a21b21c2 
=========================== 
b2 

 
a21b21c2 
=========================== 
c2 
c 

a21b21c2 
=========================== 
ABC

很奇怪對(duì)不對(duì)，最后的<”>是方法的結(jié)果，很正確，得到了預(yù)期結(jié)果，讓我們看看function的參數(shù)部分，

function被調(diào)用了3次，恰恰是匹配的次數(shù)，每次都置換匹配字符串。

每次調(diào)用的時(shí)候方法有四個(gè)參數(shù)

第一個(gè)參數(shù)很簡(jiǎn)單，是匹配字符串

第二個(gè)很詭異，不過每個(gè)都看一遍不難得出，第二個(gè)參數(shù)是正則表達(dá)式括號(hào)內(nèi)的匹配的內(nèi)容

第三個(gè)參數(shù)和容易想到，是匹配項(xiàng)在字符串中的index

第四個(gè)參數(shù)則是原字符串

很神奇對(duì)不對(duì)，但是不是就是這樣了呢，我們?cè)賹懸粋€(gè)試試

復(fù)制代碼代碼如下:

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

和前面例子很像，只是簡(jiǎn)單的把所有匹配項(xiàng)替換為了X，看看結(jié)果

復(fù)制代碼代碼如下:

a2

a21b21c2
===========================
b2

a21b21c2
===========================
c2

a21b21c2
===========================
XXX

出乎意料對(duì)不對(duì)，結(jié)果是預(yù)期的，但是參數(shù)少了一個(gè)，第二項(xiàng)參數(shù)不見了，看看究竟還有什么不同——正則表達(dá)式中看似多余的括號(hào)不見了，上一個(gè)例子中，第二項(xiàng)參數(shù)恰恰是括號(hào)內(nèi)的匹配項(xiàng)，是不是第二個(gè)參數(shù)就是正則表達(dá)式中括號(hào)內(nèi)的匹配項(xiàng)呢，我們把括號(hào)加回來驗(yàn)證一下

復(fù)制代碼代碼如下:

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

看看結(jié)果

復(fù)制代碼代碼如下:

a2
a2

a21b21c2
===========================
b2
b2

a21b21c2
===========================
c2
c2

a21b21c2
===========================
XXX

果不其然，這樣我們就了解了function中到底有哪些參數(shù)，現(xiàn)在看看JavaScript語(yǔ)言精粹重的例子就應(yīng)該明白了，當(dāng)然我們需要知道關(guān)聯(lián)數(shù)組，立即執(zhí)行函數(shù)，閉包和arguments對(duì)象，如果讓我們把一句話中所有的單詞首字母大寫，是不是會(huì)了呢

復(fù)制代碼代碼如下:

//方法很多，這個(gè)只是驗(yàn)證我們剛才的理論才故意寫成這樣麻煩的做法
 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);

復(fù)制代碼代碼如下:

//這樣寫其實(shí)已經(jīng)可以勝任
  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);

您可能感興趣的文章: