關(guān)于JavaScript中string 的replace
replace() 方法用于在字符串中用一些字符替換另一些字符,或替換一個(gè)與正則表達(dá)式匹配的子串。
語法:string.replace(subStr/reg,replaceStr/function)
第一個(gè)參數(shù)可以是字符串的子字符串,也可以是一個(gè)正則表達(dá)式,第二個(gè)參數(shù)可以是一個(gè)字符串或者一個(gè)處理方法,下面我們分別看看
document.write('1234'.replace(1, 'X'));我們可以得到結(jié)果:X234,很正常,但是
document.write('1214'.replace(1, 'X'));我們預(yù)想結(jié)果應(yīng)該是:X2X4,但是得到的結(jié)果卻是:X214,也就是說如果我們第一個(gè)參數(shù)寫的是子字符串,那么replace只替換第一個(gè)匹配就停止搜索
我們換為正則的寫法
document.write('1214'.replace(/1/g, 'X'));這時(shí)候我們可以得到預(yù)想結(jié)果:X2X4
我們看看function的寫法
var r = 'abcd'.replace(/\w/g, function() {
return 'X';
});
document.write(r);
這時(shí)我們可以看到預(yù)想結(jié)果:XXXX,所有字符被替換為X,這是我之前對(duì)replace的認(rèn)識(shí),但我在JavaScript語言精粹上看到這樣一個(gè)例子,我迷惑了
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對(duì)象添加一個(gè)deentityfy 方法,用以替換字符串中得HTML字符(把"替換為”,<替換為<,>替換為>),我們先忽略作者使用的語言技巧,看看他的replace是怎么用的,第一個(gè)參數(shù)是一個(gè)正則表達(dá)式,是匹配之前提到的三個(gè)字符串,第二個(gè)參數(shù)的function竟然有了兩個(gè)參數(shù),這兩個(gè)參數(shù)到底是什么?為什么方法卻得到了預(yù)想結(jié)果,我們來簡單分析一下。
首先entity[b]是JavaScript關(guān)聯(lián)數(shù)組的用法,根據(jù)數(shù)組數(shù)據(jù)的name得到value,為了方便理解,我們不妨改造一下這個(gè)方法,讓它變得簡單些,讓我們可以更清楚地看到function的參數(shù)到底是什么,同時(shí)為了消除瀏覽器轉(zhuǎn)碼問題,我們修改一下替換字符串
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é)果是什么
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ù)很簡單,是匹配字符串
第二個(gè)很詭異,不過每個(gè)都看一遍不難得出,第二個(gè)參數(shù)是正則表達(dá)式括號(hào)內(nèi)的匹配的內(nèi)容
第三個(gè)參數(shù)和容易想到,是匹配項(xiàng)在字符串中的index
第四個(gè)參數(shù)則是原字符串
很神奇對(duì)不對(duì),但是不是就是這樣了呢,我們再寫一個(gè)試試
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);
和前面例子很像,只是簡單的把所有匹配項(xiàng)替換為了X,看看結(jié)果
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)證一下
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é)果
a2
a2
a21b21c2
===========================
b2
b2
a21b21c2
===========================
c2
c2
a21b21c2
===========================
XXX
果不其然,這樣我們就了解了function中到底有哪些參數(shù),現(xiàn)在看看JavaScript語言精粹重的例子就應(yīng)該明白了,當(dāng)然我們需要知道關(guān)聯(lián)數(shù)組,立即執(zhí)行函數(shù),閉包和arguments對(duì)象,如果讓我們把一句話中所有的單詞首字母大寫,是不是會(huì)了呢
//方法很多,這個(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);
//這樣寫其實(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);
相關(guān)文章
簡單介紹JavaScript的變量和數(shù)據(jù)類型
這篇文章主要介紹了簡單介紹JavaScript的變量和數(shù)據(jù)類型,是JS入門中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06window.parent與window.openner區(qū)別介紹
今天總結(jié)一下js中幾個(gè)對(duì)象的區(qū)別和用法,對(duì)這幾個(gè)概念混淆的朋友可以看看2012-04-04js對(duì)象屬性的攔截與Proxy代理與Reflect映射的用法和區(qū)別講解
reflect和proxy都是JavaScript中用于處理對(duì)象的特殊API,下面這篇文章主要給大家介紹了關(guān)于js對(duì)象屬性的攔截與Proxy代理與Reflect映射的用法和區(qū)別,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06如何在標(biāo)題欄顯示框架內(nèi)頁面的標(biāo)題
如何在標(biāo)題欄顯示框架內(nèi)頁面的標(biāo)題...2007-02-02JavaScript中操作字符串之localeCompare()方法的使用
這篇文章主要介紹了JavaScript中操作字符串之localeCompare()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06