Javascript中字符串replace方法的第二個(gè)參數(shù)探究
前言
replace第一個(gè)參數(shù)一般放置的是正則表達(dá)式,用來匹配想要替換的文本;第二個(gè)參數(shù)一般我們放入的是字符串,用來替換掉正則匹配到的文本。
其實(shí)replace遠(yuǎn)比上面說的要強(qiáng)大的多,它的內(nèi)部已經(jīng)封裝的很完善了,遠(yuǎn)不是我們想象的那么簡(jiǎn)單,下面我們就來詳細(xì)聊聊replace的第二個(gè)參數(shù)。
實(shí)例介紹
現(xiàn)在要實(shí)現(xiàn)一個(gè)功能,把HTML中的字符實(shí)體轉(zhuǎn)換成它們所對(duì)應(yīng)的字符,比如:"<"轉(zhuǎn)換成對(duì)對(duì)應(yīng)字符為:"<"。
下面我們來看看代碼實(shí)現(xiàn):
String.prototype.deentityfy=(function(){ var entity = { lt:'<', gt:'>' }; return function(){ return this.replace(/&([^&;]+);/g, function(a,b,c,d){ console.log('a:'+a+'---b:'+b+'---c:'+c+'---d:'+d); var r = entity[b]; return typeof r ==='string' ? r : a ; }) } }()) document.write('<h1>我是標(biāo)題</h1>'.deentityfy());
這里得講講字符實(shí)體,以免下面混淆。
字符實(shí)體是不會(huì)當(dāng)作HTML語句來解析的,比如上面的'<h1>我是標(biāo)題</h1>'這一段輸出到頁面上,我們看到的是這樣的:
<h1>只是被瀏覽器當(dāng)作字符串輸出,而不是標(biāo)簽輸出,上面這段代碼就是把這些字符實(shí)體轉(zhuǎn)換成對(duì)應(yīng)字符,能夠被瀏覽器所編譯。
我們一步步來看上面的代碼是怎么實(shí)現(xiàn)的。
首先,給String
對(duì)象的原型掛載了一個(gè)deentityfy
方法,這個(gè)方法是個(gè)自執(zhí)行函數(shù),使用閉包的形式,函數(shù)內(nèi)的所有內(nèi)容對(duì)外都是不可見的。
函數(shù)內(nèi),我們定義了一個(gè)entity
對(duì)象字面量,里面有兩個(gè)屬性,分別對(duì)應(yīng)標(biāo)簽的左右尖括號(hào)。
接下來return
一個(gè)匿名函數(shù),把我們要做的事寫在這個(gè)函數(shù)內(nèi)。
我們調(diào)用replace
方法,第一個(gè)參數(shù)放置正則表達(dá)式:
/&([^&;]+);/g
這段正則表達(dá)式的匹配規(guī)則是:以"&"開頭,后面緊跟一個(gè)或一個(gè)以上不是"&"和";"的字符,以";"結(jié)束。后面的g代表全局匹配。(更多有關(guān)正則表達(dá)式的學(xué)習(xí)請(qǐng)點(diǎn)擊這里)
這里著重說下,正則中的"()"和javascript中運(yùn)算時(shí)使用的"()"概念是不同的,這里的括號(hào)術(shù)語叫做:捕獲括號(hào)。簡(jiǎn)單的說就是把括號(hào)內(nèi)匹配到的字符暫時(shí)儲(chǔ)存起來,在待會(huì)的替換環(huán)節(jié)可以取出來用。
接下來詳細(xì)講講replace的第二個(gè)參數(shù),也就是本文的重點(diǎn)。
我們一般是放一個(gè)字符串在第二個(gè)參數(shù)中,直接用于替換所匹配到的字符;還有更高階的技巧,使用$字符可以取得捕獲括號(hào)中的內(nèi)容,再進(jìn)行相關(guān)操作。
還有第三種方法, 給第二個(gè)參數(shù)傳入匿名函數(shù),函數(shù)的返回值用做替換的字符。
匿名函數(shù)有4個(gè)參數(shù)可以傳入,當(dāng)然,這些參數(shù)都不是必須要傳的。
第一個(gè)參數(shù):正則所匹配到的字符;
第二個(gè)參數(shù):捕獲括號(hào)所捕獲到的字符;
第三個(gè)參數(shù):正則匹配到的每段字符的第一個(gè)字符的索引;
第四個(gè)參數(shù):用于匹配的字符串主體;
我把上面代碼的運(yùn)行結(jié)果打印出來大家應(yīng)該就很清晰了:
總結(jié)
好了,以上就是這篇文章的全部?jī)?nèi)容了,接觸正則也快三年時(shí)間了,一直不知道正則還有這么強(qiáng)大的功能,當(dāng)然也可能是我孤陋寡聞啦。希望大家永葆一顆學(xué)習(xí)的心,一起進(jìn)步。同時(shí)也希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
- JS、replace利用正則表達(dá)式替換SQL所有參數(shù)為指定格式的數(shù)據(jù)
- JavaScript String.replace函數(shù)參數(shù)實(shí)例說明
- js正則函數(shù)match、exec、test、search、replace、split使用介紹集合
- JS利用正則配合replace替換指定字符
- js中字符替換函數(shù)String.replace()使用技巧
- js 頁面刷新location.reload和location.replace的區(qū)別小結(jié)
- js replace 與replaceall實(shí)例用法詳解
- javascript中使用replaceAll()函數(shù)實(shí)現(xiàn)字符替換的方法
- js使用正則實(shí)現(xiàn)ReplaceAll全部替換的方法
- javascript replace()用法詳解附實(shí)例代碼
相關(guān)文章
JavaScript的常見兼容問題及相關(guān)解決方法(chrome/IE/firefox)
本篇文章只要是對(duì)JavaScript的常見兼容問題及相關(guān)解決方法(chrome/IE/firefox)進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12微信小程序仿抖音視頻之整屏上下切換功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序仿抖音視頻之整屏上下切換功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05小程序圖片長(zhǎng)按識(shí)別功能的實(shí)現(xiàn)方法
這篇文章主要介紹了小程序圖片長(zhǎng)按識(shí)別功能的實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08推薦4個(gè)原生javascript常用的函數(shù)
這篇文章主要介紹了推薦4個(gè)原生javascript常用的函數(shù),需要的朋友可以參考下2015-01-01回車直接實(shí)現(xiàn)點(diǎn)擊某按鈕的效果即觸發(fā)單擊事件
這篇文章主要介紹了回車直接實(shí)現(xiàn)點(diǎn)擊某按鈕的效果即觸發(fā)單擊事件,需要的朋友可以參考下2014-02-02