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