關於JavaScript中string 的replace

來源:互聯網
上載者:User

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('<">'.deentityfy());

這段代碼是為JavaScript的String對象添加一個deentityfy 方法,用以替換字串中得HTML字元(把"替換為”,<替換為<,>替換為>),我們先忽略作者使用的語言技巧,看看他的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());

這樣,我們把方法的參數都列印出來,看看結果是什麼複製代碼 代碼如下:a2
a

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

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

a21b21c2
===========================
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,看看結果

複製代碼 代碼如下:a2

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

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

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

看看結果

複製代碼 代碼如下:a2
a2

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

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

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.