javascript正則表達(dá)式怎么寫(xiě)

本篇內(nèi)容介紹了“javascript正則表達(dá)式怎么寫(xiě)”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1、創(chuàng)建正則表達(dá)式
第一種方式：注意這里的正則表達(dá)式不能使用單引號(hào)或者雙引號(hào)，如下
var pattern1 = /[abc]/i; // 匹配第一個(gè)"a"或"b"或"c"，不區(qū)分大小寫(xiě)
第二種方式：使用RegExp構(gòu)造函數(shù)創(chuàng)建，該構(gòu)造函數(shù)傳入兩個(gè)參數(shù)，都是字符串，所以需要特別注意"\"符號(hào)的轉(zhuǎn)換，所有元字符（下面有講元字符）需要雙重轉(zhuǎn)義，如下

復(fù)制代碼 代碼如下:

var patt1 = new RegExp("[abc]","gi"); // 這里等價(jià)于 var patt1 = /[abc]/gi;
alert("[abc]".match(patt1)); // return a
var patt2 = new RegExp("\\[abc\\]","gi"); // 這里等價(jià)于 var patt2 = /\[abc\]/gi; 而在引號(hào)內(nèi)"\"必須轉(zhuǎn)移為"\\"
alert("[abc]".match(patt2)); // return [abc]

說(shuō)到這里思考兩個(gè)問(wèn)題：
a、如果這里的正則表達(dá)式，是通過(guò)字符串和某個(gè)變量動(dòng)態(tài)組合而成的，如何使用第一種方式創(chuàng)建正則表達(dá)式？
顯然，用第二種創(chuàng)建正則表達(dá)式的方式，肯定沒(méi)有任何問(wèn)題，因?yàn)?，傳入的第一個(gè)參數(shù)本身就是一個(gè)字符串。要用第一種方式創(chuàng)建，這里需要用到eval()函數(shù)，如下

復(fù)制代碼 代碼如下:

var str = "abc"; // 這可能是一個(gè)動(dòng)態(tài)的變量
var patt1 = eval("/\\["+str+"\\]/"); // 等價(jià)于 var patt1 = /\[abc\]/;
alert("[abc]".match(patt1)); // return [abc]

b、上面兩種創(chuàng)建方法有什么不同之處？
《javascript高級(jí)程序設(shè)計(jì)（第三版）》中講：區(qū)別在于是否共享，使用第一種方式創(chuàng)建的正則，共享，第二種不共享。經(jīng)樓主實(shí)踐發(fā)現(xiàn)結(jié)果有點(diǎn)出入，兩種創(chuàng)建方式結(jié)果一樣，都是（true true true），各位可以自行測(cè)試。所以這里MARK一下，這兩種創(chuàng)建方式?jīng)]什么區(qū)別。

復(fù)制代碼 代碼如下:

var re = null,i;
for(i=0;i<3;i++){
re = /cat/g;//書(shū)：實(shí)例屬性不會(huì)重置，下面的結(jié)果應(yīng)該是 true false true
alert(re.test("catasdfdfdf"));
}
for(i=0;i<3;i++){
re = new RegExp("cat","g");//書(shū)：實(shí)例屬性會(huì)重置,下面的結(jié)果應(yīng)該是 true true true
alert(re.test("catasdfdfdf"));
}

這里順便講一下匹配模式的三個(gè)標(biāo)志：g、i、m
g：設(shè)置了g之后，模式被應(yīng)用于所有字符串，發(fā)現(xiàn)第一個(gè)匹配項(xiàng)后，不會(huì)立即停止，模式的lastIndex會(huì)移至下一個(gè)位置，待下一次應(yīng)用此模式的時(shí)候，再次從lastIndex開(kāi)始匹配，如果匹配到最后了，lastIndex才會(huì)被重置為0；
i：這個(gè)很好理解，不區(qū)分大小寫(xiě)；
m：表示多行模式，即在到達(dá)一行文本末尾的時(shí)候還會(huì)繼續(xù)查找下一行，進(jìn)行匹配；
2、元字符： ( [ { \ ^ $ | ) ? * + . ] }
這些字符在正則表達(dá)式中有一或多種特殊用途，因此如果想匹配這些字符，都需要進(jìn)行轉(zhuǎn)義。如：

復(fù)制代碼 代碼如下:

var pattern1 = /\[abc\]/i; // 匹配第一個(gè)"[abc]"，不區(qū)分大小寫(xiě)
var pattern2 = /[abc]/i; // 匹配第一個(gè)"a"或"b"或"c"，不區(qū)分大小寫(xiě)

3、RegExp實(shí)例屬性
global、ignoreCase、multiline、lastIndex、source，這些屬性用處不大，其中l(wèi)astIndex可用于調(diào)試，簡(jiǎn)單示例

復(fù)制代碼 代碼如下:

var patt1 = /cat/g;
patt1.test("catasdfdfdf");
dw(patt1.global); // 是否設(shè)置了g，全局模式 // true
dw(patt1.ignoreCase); // 是否設(shè)置了i，不區(qū)分大小寫(xiě) // false
dw(patt1.multiline); // 是否設(shè)置了m,多行匹配，到了一行末尾，能夠繼續(xù)匹配下一行 // false
dw(patt1.lastIndex); // 表示開(kāi)始搜索下一個(gè)匹配項(xiàng)的開(kāi)始位置，第一次為0 // 3
dw(patt1.source); // 返回正則表達(dá)式字面量 // cat

4、范圍集合類(lèi)：[] ^ |
[abc]，表示a或者b或者c中的任意一個(gè)字符
[a-z]、[A-Z]、[0-9]，表示小寫(xiě)字母，大寫(xiě)字母，0到9的數(shù)字
[^a-z]、[^A-Z]、[^0-9]，表示非小寫(xiě)字母，非大寫(xiě)字母，非0到9的數(shù)字
[abc|def]，表示abc和def中的任意一個(gè)

復(fù)制代碼 代碼如下:

alert(/[abc]/.test("a"));//true
alert(/[abc]/.test("gg"));//false
alert(/[^abc]/.test("a"));//false
alert(/[^abc]/.test("gg"));//true
alert(/[a-z]/.test("A"));//false
alert(/[A-Z]/.test("A"));//true
alert(/[abc|def]/.test("def"));//true

5、量詞類(lèi)：? * + {m} {m,n} {m,}
? 0或1次，放在量詞后面，表示非貪婪品匹配，后面講解
* 0或多次
+ 1或多次
{m} m次
{m,n} 至少m次，至多n次
{m,} 至少m次

復(fù)制代碼 代碼如下:

alert(/a?/.test("a"));//true
alert(/a?/.test("b"));//true 可以出現(xiàn)0次
alert(/a*/.test("a"));//true
alert(/a*/.test("b"));//true 可以出現(xiàn)0次
alert(/a+/.test("a"));//true
alert(/a+/.test("b"));//false
alert(/a{3}/.test("aaaaa"));//true
alert(/a{3}/.test("bbbbb"));//false 看到網(wǎng)上一些文章將，這里應(yīng)該是0或者3次，這里樓主測(cè)試了幾個(gè)瀏覽器，沒(méi)有0次
alert(/a{3,5}/.test("aaaaa"));//true
alert(/a{3,5}/.test("bbbbbb"));//false
alert(/a{3,}/.test("aaaaa"));//true
alert(/a{3,}/.test("bbbbbb"));//false

6、邊界類(lèi)： ^ $ \b \B
^ 表示開(kāi)頭的標(biāo)志，注意，不能緊接著左中括號(hào)，比如[^A-Z]，這樣表示非
$ 表示結(jié)尾的標(biāo)志
\b 單詞邊界的標(biāo)志，這樣理解，它表示單詞間那個(gè)看不到的東西，一側(cè)是單詞字符，一側(cè)是非單詞字符(包括各種標(biāo)點(diǎn)和空白字符或中文)
\B 非單詞邊界的標(biāo)志

復(fù)制代碼 代碼如下:

alert(/^居$/.test("居")); // 只限一個(gè) 居 true
alert(/^居$/.test("居居")); // 只限一個(gè) 居 false
alert(/\b啊/.test("a啊")); // true 思考一下：為什么這個(gè)和下面的結(jié)果不一樣？？
alert(/\b啊/.test("-啊")); // false
alert(/\B啊/.test("a啊")); // false
alert(/\B啊/.test("-啊")); // true

alert(/\b啊/.test("a啊")); 中，"a"和"啊"之間存在一個(gè)\b，因?yàn)閈b的左邊是"a"，右邊是"啊"，所以能夠匹配，為true；
相反：alert(/\b啊/.test("-啊")); 中，"啊"的左邊有個(gè)\b，但是\b的左邊是"-"，不是單詞字符，所以，不能匹配，為false
7、預(yù)定義類(lèi)： \d \D \s \S \w \W .
\d 表示0-9的數(shù)字字符，相當(dāng)于 [0-9]
\D 表示非0-9的數(shù)字字符，相當(dāng)于 [^0-9]

復(fù)制代碼 代碼如下:

alert(/\d/.test("1"));//true
alert(/\D/.test("1"));//false

\s 空白字符，相當(dāng)于 [\n\r\f\t\x0B ] ，注意空格也算
\S 非空白字符，相當(dāng)于 [^\n\r\f\t\x0B ]

復(fù)制代碼 代碼如下:

alert(/\s/.test(" "));//true，空格也算
alert(/\S/.test("\n\r\f\t\x0B "));//false
alert(/\S/.test("\n\r\f\t\x0B \\"));//true

\w 單詞字符，相當(dāng)于 [a-zA-Z0-9_]
\W 非單詞字符，相當(dāng)于 [^a-zA-Z0-9_]

復(fù)制代碼 代碼如下:

alert(/\w/.test("afdas"));//true
alert(/\W/.test("afdas"));//false

(點(diǎn)). 表示除了\n和\r意外的任意字符，相當(dāng)于 [^\n\r]

復(fù)制代碼 代碼如下:

alert(/./.test("\n\r"));//false ，只有這兩個(gè)，其他的都能夠被 . 匹配
alert(/./.test(" "));//true

8、RegExp實(shí)例方法：exec() test() match()
exec()：返回第一個(gè)匹配項(xiàng)信息的數(shù)組，沒(méi)能匹配成功返回null，用法：pattern.exec(str); 需要注意有沒(méi)有"g"的不一樣

復(fù)制代碼 代碼如下:

var re1 = /([a-z]*)bbb/;//貪婪
document.write(re1.test("abbbaabbb1234")+"<br />");//true
document.write(re1.exec("abbbaabbb1234")+"<br />");//abbbaabbb,abbbaa,這里貪婪匹配到abbaabbb，然后$1為abbbaa，所以此時(shí)返回abbbaabbb,abbbaa
var re1 = /([a-z]*)bbb/g;//貪婪
document.write(re1.test("abbbaabbb1234")+"<br />");//true
document.write(re1.exec("abbbaabbb1234")+"<br />");//null //因?yàn)樵O(shè)置了g標(biāo)識(shí)，并為貪婪匹配，而上面的test已經(jīng)貪婪匹配到abbbaabbb，后面只有1234，所以此時(shí)匹配不到，返回null

test()：在只需要知道是否匹配，不需要知道具體匹配什么文本的情況下，使用這個(gè)放個(gè)比較方便，用法：pattern.test(str);

復(fù)制代碼 代碼如下:

var re1 = /([a-z]*)bbb/;//貪婪
document.write(re1.test("abbbaabbb1234")+"<br />");//true
document.write(re1.test("abbbaabbb1234")+"<br />");//true
document.write(re1.test("abbbaabbb1234")+"<br />");//true
var re1 = /([a-z]*)bbb/g;//貪婪
document.write(re1.test("abbbaabbb1234")+"<br />");//true
document.write(re1.test("abbbaabbb1234")+"<br />");//false 要理解這里為什么是false，因?yàn)樵O(shè)置了g，那么這次的匹配是從1開(kāi)始的
document.write(re1.test("abbbaabbb1234")+"<br />");//true

match()：這個(gè)函數(shù)比較特別，在設(shè)置g和不設(shè)置的情況下，表示形式完全不一樣，在未設(shè)置g的情況下，表現(xiàn)形式和exec一樣，設(shè)置了g的情況下，將返回所有匹配到的值的集合，用法：str.match(pattern)

復(fù)制代碼 代碼如下:

var re1 = /([a-z]*)bbb/;//貪婪
document.write("abbbaabbb1234".match(re1)+"<br />");//abbbaabbb,abbbaa 這里的abbbaabbb是匹配到的整個(gè)字符串，abbbaa是匹配第一個(gè)小括號(hào)的字符串
var re1 = /([a-z]*)bbb/g;//貪婪
document.write("abbbaabbb1234".match(re1)+"<br />");//abbbaabbb，在設(shè)置了g后，match()返回所有匹配到的值

最后，exec()和未設(shè)置g的match()， 最后返回的數(shù)組的第一個(gè)元素是整個(gè)匹配的字符串，如果模式中存在小括號(hào)，那么第二個(gè)元素是第一個(gè)括號(hào)的匹配內(nèi)容，以此類(lèi)推，第三個(gè)、第四個(gè)。。。比如：

復(fù)制代碼 代碼如下:

var re1 = /(a(b(c)))d/;
var str = "abcdd";
var matches = str.match(re1);
alert(matches[0]);//abcd //這里是整個(gè)字符串
alert(matches[1]);//abc //這里是第一個(gè)小括號(hào)
alert(matches[2]);//bc // 這里是第二個(gè)小括號(hào)
alert(matches[3]);//c // 這里是第三個(gè)小括號(hào)

9、貪婪和非貪婪匹配 ?
貪婪匹配：匹配到之后，繼續(xù)往后匹配到字符串結(jié)束，然后選擇最長(zhǎng)的。比如：對(duì)于字符串"aaaaaab"，要匹配/a+/,那么匹配的將是"aaaaaa"，而不是一個(gè)"a"。
非貪婪匹配：匹配到之后，馬上停止。比如：對(duì)于字符串"aaaaaab"，要匹配/a+?/,那么匹配的將是"a"，而不是一個(gè)"aaaaaa"。用法就是在量詞后面加"?"。

復(fù)制代碼 代碼如下:

var re1 = /a+/;
var str = "aaaaaaa";
alert(str.match(re1));// aaaaaaa
var re1 = /a+?/;
var str = "aaaaaaa";
alert(str.match(re1));// a

下面給一個(gè)綜合一點(diǎn)的例子：講解了貪婪和非貪婪，全局g，exec和match的區(qū)別？？？

復(fù)制代碼 代碼如下:

var re1 = /([a-z]*)bbb/;//貪婪
var re2 = /([a-z]*?)bbb/;//非貪婪
document.write(re1.test("abbbaabbb1234")+"<br />");//true
document.write(re1.exec("abbbaabbb1234")+"<br />");//abbbaabbb,abbbaa,這里貪婪匹配到abbaabbb，然后$1為abbbaa，所以此時(shí)返回abbbaabbb,abbbaa
document.write("abbbaabbb1234".match(re1)+"<hr>");//abbbaabbb,abbbaa,這里貪婪匹配到abbaabbb，然后$1為abbbaa，所以此時(shí)返回abbbaabbb,abbbaa
document.write(re2.test("abbbaabbb1234")+"<br />");//true
document.write(re2.exec("abbbaabbb1234")+"<br />");//abbb,a ，這里非貪婪匹配到abbb，然后$1為a，所以此時(shí)返回abbb,a
document.write("abbbaabbb1234".match(re2)+"<hr>");//abbb,a ，這里非貪婪匹配到abbb，然后$1為a，所以此時(shí)返回abbb,a
var re3 = /([a-z]*)bbb/g;//貪婪
var re4 = /([a-z]*?)bbb/g;//非貪婪
document.write(re3.test("abbbaabbb1234")+"<br />");//true
document.write(re3.exec("abbbaabbb1234")+"<br />");//null ，因?yàn)樵O(shè)置了g標(biāo)識(shí)，并為貪婪匹配，而上面的test已經(jīng)貪婪匹配到abbbaabbb，后面只有1234，所以此時(shí)匹配不到，返回null
document.write("abbbaabbb1234".match(re3)+"<hr>");//abbbaabbb，注意在設(shè)置了g標(biāo)識(shí)后，match只返回匹配到的所有值，這里因?yàn)槭秦澙菲ヅ?，所以匹配了abbbaabbb
document.write(re4.test("abbbaabbb1234")+"<br />");//true
document.write(re4.exec("abbbaabbb1234")+"<br />");//aabbb,aa ，因?yàn)樵O(shè)置了g標(biāo)識(shí)，并為非貪婪匹配，而上面的test已經(jīng)貪婪匹配到abbb，后面只有aabbb1234，所以此時(shí)在此匹配到aabbb，此時(shí)$1為aa，所以返回aabbb,aa
document.write("abbbaabbb1234".match(re4)+"<hr>");//abbb,aabbb 注意在設(shè)置了g標(biāo)識(shí)后，match只返回匹配到的所有值，這里因?yàn)槭欠秦澙菲ヅ洌云ヅ淞薬bbb,aabbb

10、反向引用
正則表達(dá)式中的匹配組捕獲的子字符串。每個(gè)反向引用都由一個(gè)編號(hào)或名稱(chēng)來(lái)標(biāo)識(shí)，并通過(guò)“\編號(hào)”表示法進(jìn)行引用。

復(fù)制代碼 代碼如下:

/(\w+)/.test("hello-world");
dwl(RegExp.$1);//hello
dwl(/(居)\1/.test("居居"))//true 這里的\1表示第一個(gè)小括號(hào)里面的內(nèi)容
dwl("aa bbb cccc".replace(/(\w{2,}) (\w{2,}) (\w{2,})/,"$3 $2 $1")); // cccc bbb aa

11、非捕獲性分組 ?:
并不是每個(gè)小括號(hào)都能通過(guò)反向引用進(jìn)行捕獲，在小括號(hào)后面加上"?:"，即可進(jìn)行設(shè)置非捕獲性分組。

復(fù)制代碼 代碼如下:

/(\w+)-(\w+)/.test("hello-world");
alert(RegExp.$0);//undefined
alert(RegExp.$1);//""不會(huì)被捕獲
alert(RegExp.$2);//world

12、正向前瞻 ?= 和負(fù)向前瞻 ?!
(?=str) 匹配后面緊跟是str，比如 he 能夠通過(guò)模式 /he(?=llo)/ 匹配 字符串 "hello"
(?!str) 匹配后面緊跟不是str，比如 hel 能夠通過(guò)模式 /he(?!llo)/ 匹配 字符串 "hello"

復(fù)制代碼 代碼如下:

//這樣理解，將(?=str)或者(?!str)當(dāng)做條件，然后考慮匹配其他的部分，匹配到了之后，再拿條件作對(duì)比，看符不符合
dwl("he-lloworld".match(/(\w+)(?=world)/g)); //llo 這里先匹配(\w+)，找到兩個(gè)塊，he和lloworld，其中he不符合(?=world)，而lloworld，只要拆成llo和world連接，就符合(?=world)，即，llo鏈接了一個(gè)world，所以這里匹配了llo
dwl("he-lloworld".match(/(\w+)(?!world)/g)); //he,lloworld 這里先匹配(\w+)，找到兩個(gè)塊，he和lloworld，其中he不符合(?=world)，而lloworld，只要不拆，就符合(?!world)，即，llo鏈接了一個(gè)world，所以這里匹配了he,lloworld

13、出幾個(gè)實(shí)例題目？
a、講一個(gè)字符串中的所有英文單詞首字母大寫(xiě)？

復(fù)制代碼 代碼如下:

var str = "你好hello世界woRld，我i愛(ài)love你you";
var str = str.toLowerCase().replace(/\b\w|\s\w/g,function(s){
return s.toUpperCase();
});
alert(str)

b、去除html代碼中的所有標(biāo)簽，除了a標(biāo)簽

復(fù)制代碼 代碼如下:

var str = "<p><a href='https://www.jb51.net/'>居居居居居居居居居</a ></p><hr/><p> by <em>居居居居居居居居居</em></p>";
var str = str.replace(/<(?!(\/?a))(.|\s)*?>/g,""); // 這里用到了 負(fù)前瞻
alert(str); // <a href='https://www.jb51.net/'>居居居居居居居居居</a > by 居居居居居居居居居

“javascript正則表達(dá)式怎么寫(xiě)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！