01第一節:replace()方法概述
在#JavaScript#中,replace()方法可以在字符串中使用一個或多個字符替換為另外一個或多個字符,也可以替換為一個與正則表達式能夠匹配上的子字符串。
注意:使用replace()方法只能將字符串中第一個被匹配到的字符串替換掉。
02第二節:使用正則表達式替換
這裡我們將舉一個例子,使用正則表達式且不區分大小寫將字符串中的 Microsoft 替換為 Google。
JavaScript核心代碼如下:
<script type="text/javascript">var str = "Hello Microsoft!";var res = str.replace(/Microsoft/i, "Google");document.write(res);</script>
replace()方法的參數說明如下:
第1個參數可以是查找的字符串,也可以是一個正則表達式,此例子中是一個正則表達式。第2個參數是最終要替換為的新字符串。該方法的功能是將第1個參數匹配到的值替換為第2個參數的值。返回的結果就是替換後的新字符串。現在將JS代碼運行一下結果:
圖1
從圖1的運行結果上看,已經將Hello Microsoft替換為Hello Google字符串。
在Replace()方法中,使用了正則表達式,則只要能在正則表達式上匹配到,則就會發生替換。
03第三節:使用字符串替換
replace()方法的第一個參數除了使用正則表達式之外,還可以使用字符串。
使用字符串替換的核心JavaScript代碼如下:
<script type="text/javascript">var str = "一都編程,每個知識就是一個案例。";var res = str.replace("案例", "例子");document.write(res);</script>
此JS代碼說明如下:
在replace()方法中第一個參數使用了一個字符串,這個字符串是「案例」。在replace()方法中第二個參數是最終要替換為的新字符串。這裡是「例子」。該代碼的含義是將「案例」替換為「例子」。將上面的核心代碼,運行一下結果:
圖2
對於replace()方法,返回的是替換後的整個字符串,也是需要的有意義的字符串。
04第四節:exec()方法
對於exec()方法,它不是字符串對象的方法,而是在正則表達式對象上使用的方法。
exec()方法的功能是用於查找一個字符串是否能在正則表達式中被匹配上,如果匹配上,則返回匹配到的結果,如果未匹配上,則返回null值。
現在舉例說明一下exec()方法的使用:
<script>var x = /a/g.exec("abc");console.log(x);</script>
此JS代碼說明如下:
/a/g是一個正則表達式,a是匹配模式,g是全局標誌。exec()是正則表達式上的一個方法。exec()方法的第一個參數是匹配的字符串。exec()方法返回的是一個Array類型數組:
運行後的結果如下:
圖3
在圖3中,返回的一個使用[]中括號組成的數組對象,匹配到的值是「a」,索引位置是0。表示匹配成功了。
如果我們直接使用document.write()方法輸出,則輸出的值就是a。
05第五節:test()方法
test()方法是在正則表達式上使用的,是一個用於測試字符串是否被匹配上的布爾結果。如果匹配上,則test()的結果是true,否則為false。
下面我們舉例說明一下test()方法具體是如何使用的,JS代碼如下:
<script>var x = /a/g.test("123a890a77777a");console.log(x);</script>
運行一下結果,打開Google Chrome瀏覽器的控制臺,查看一下結果:
圖4
從運行結果上看,test()方法返回的結果值是true,表示匹配成功了。
06第六節:修飾符標誌
在JavaScript中,在正則表達式上還可以使用了修飾符,也稱為標誌,共有3個,分別為:/i、/g、/m。
這3個修飾符的含義和使用方法如下所述。
6.1. /g修飾符和match()方法
/g修飾符,表示執行全局匹配,並不是所有與正則表達式相關的函數都支持全局匹配。
例如:search()方法就不支持/g修飾符,而match()和replace()方法就支持/g。如下JavaScript代碼如下:
<script type="text/javascript">var patt = /Yido/g;var str = "ABCYido 123Yido!";var res = str.match(patt);document.write(res);console.log(res);</script>
字符串match()方法使用正則表達式模式對字符串執行查找,並將包含查找的結果作為數組Array返回。
由於這裡使用了/g修飾符,所以返回的結果是多個,使用Array數組表示。
運行結果如下圖所示:
圖5
從圖5上看,返回的結果是一個數組,且全是匹配到的正確結果。
6.2. /m修飾符
/m表示多行查找,常用於^和$匹配中,^表示開頭,$表示結尾。
一般情況下,m和g配合使用才有意義。
<script type="text/javascript">var patt = /^Yido/g;var str = "Yido\nYido";var res = str.match(patt);document.write(res);</script>
這裡只使用了/g,運行一下結果:
圖6
從運行的結果上看,只查找到了一個結果。
現在我們修改一下正則表達式,使用/gm修飾符表示:
<script type="text/javascript">var patt = /^Yido/gm;var str = "Yido\nYido";var res = str.match(patt);document.write(res);</script>
這裡使用了/gm,執行全局多行查找,運行結果如下:
圖7
當在正則表達式上使用了/gm,則匹配上了2個結果,這就是/m的結果。
6.3. /i修飾符
/i修飾符表示不區分大小寫匹配,如A和a一樣匹配。
舉例說明,JS代碼如下:
<script type="text/javascript">var patt = /Ho/;var str = "123HOABC";var res = str.search(patt);document.write(res);</script>
運行結果如下:
圖8
從圖8的結果上看,返回的結果是-1,表示沒有匹配到,因為Ho與HO不能匹配,是區分大小寫匹配。
現在使用/i修飾符,執行區分大小寫匹配。JS代碼如下:
<script type="text/javascript">var patt = /Ho/i;var str = "123HOABC";var res = str.search(patt);document.write(res);</script>
運行結果如下:
圖9
此時,匹配到的結果是3,表示使用search()方法匹配到結果了,是按區分大小寫匹配上的。