javascript進階程式設計(第三版)學習筆記（一） Regex整理

1、建立Regex
第一種方式：注意這裡的Regex不能使用單引號或者雙引號，如下
var pattern1 = /[abc]/i; // 匹配第一個"a"或"b"或"c"，不區分大小寫
第二種方式：使用RegExp建構函式建立，該建構函式傳入兩個參數，都是字串，所以需要特別注意"\"符號的轉換，所有元字元（下面有講元字元）需要雙重轉義，如下 複製代碼 代碼如下:var patt1 = new RegExp("[abc]","gi"); // 這裡等價於 var patt1 = /[abc]/gi;
alert("[abc]".match(patt1)); // return a
var patt2 = new RegExp("\\[abc\\]","gi"); // 這裡等價於 var patt2 = /\[abc\]/gi; 而在引號內"\"必須轉移為"\\"
alert("[abc]".match(patt2)); // return [abc]

說到這裡思考兩個問題：
a、如果這裡的Regex，是通過字串和某個變數動態組合而成的，如何使用第一種方式建立Regex？
顯然，用第二種建立Regex的方式，肯定沒有任何問題，因為，傳入的第一個參數本身就是一個字串。要用第一種方式建立，這裡需要用到eval()函數，如下 複製代碼 代碼如下:var str = "abc"; // 這可能是一個動態變數
var patt1 = eval("/\\["+str+"\\]/"); // 等價於 var patt1 = /\[abc\]/;
alert("[abc]".match(patt1)); // return [abc]

b、上面兩種建立方法有什麼不同之處？
《javascript進階程式設計（第三版）》中講：區別在於是否共用，使用第一種方式建立的正則，共用，第二種不共用。經樓主實踐發現結果有點出入，兩種建立方式結果一樣，都是（true true true），各位可以自行測試。所以這裡MARK一下，這兩種建立方式沒什麼區別。 複製代碼 代碼如下:var re = null,i;
for(i=0;i<3;i++){
re = /cat/g;//書：執行個體屬性不會重設，下面的結果應該是 true false true
alert(re.test("catasdfdfdf"));
}
for(i=0;i<3;i++){
re = new RegExp("cat","g");//書：執行個體屬性會重設,下面的結果應該是 true true true
alert(re.test("catasdfdfdf"));
}

這裡順便講一下匹配模式的三個標誌：g、i、m
g：設定了g之後，模式被應用於所有字串，發現第一個匹配項後，不會立即停止，模式的lastIndex會移至下一個位置，待下一次應用此模式的時候，再次從lastIndex開始匹配，如果匹配到最後了，lastIndex才會被重設為0；
i：這個很好理解，不區分大小寫；
m：表示多行模式，即在到達一行文本末尾的時候還會繼續尋找下一行，進行匹配；
2、元字元： ( [ { \ ^ $ | ) ? * + . ] }
這些字元在Regex中有一或多種特殊用途，因此如果想匹配這些字元，都需要進行轉義。如： 複製代碼 代碼如下:var pattern1 = /\[abc\]/i; // 匹配第一個"[abc]"，不區分大小寫
var pattern2 = /[abc]/i; // 匹配第一個"a"或"b"或"c"，不區分大小寫

3、RegExp執行個體屬性
global、ignoreCase、multiline、lastIndex、source，這些屬性用處不大，其中lastIndex可用於調試，簡單樣本 複製代碼 代碼如下:var patt1 = /cat/g;
patt1.test("catasdfdfdf");
dw(patt1.global); // 是否設定了g，全域模式 // true
dw(patt1.ignoreCase); // 是否設定了i，不區分大小寫 // false
dw(patt1.multiline); // 是否設定了m,多行匹配，到了一行末尾，能夠繼續匹配下一行 // false
dw(patt1.lastIndex); // 表示開始搜尋下一個匹配項的開始位置，第一次為0 // 3
dw(patt1.source); // 返回Regex字面量 // cat

4、範圍集合類：[] ^ |
[abc]，表示a或者b或者c中的任意一個字元
[a-z]、[A-Z]、[0-9]，表示小寫字母，大寫字母，0到9的數字
[^a-z]、[^A-Z]、[^0-9]，表示非小寫字母，非大寫字母，非0到9的數字
[abc|def]，表示abc和def中的任意一個 複製代碼 代碼如下: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、量詞類：? * + {m} {m,n} {m,}
? 0或1次，放在量詞後面，表示非貪婪品匹配，後面講解
* 0或多次
+ 1或多次
{m} m次
{m,n} 至少m次，至多n次
{m,} 至少m次 複製代碼 代碼如下:alert(/a?/.test("a"));//true
alert(/a?/.test("b"));//true 可以出現0次
alert(/a*/.test("a"));//true
alert(/a*/.test("b"));//true 可以出現0次
alert(/a+/.test("a"));//true
alert(/a+/.test("b"));//false
alert(/a{3}/.test("aaaaa"));//true
alert(/a{3}/.test("bbbbb"));//false 看到網上一些文章將，這裡應該是0或者3次，這裡樓主測試了幾個瀏覽器，沒有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、邊界類： ^ $ \b \B
^ 表示開頭的標誌，注意，不能緊接著左中括弧，比如[^A-Z]，這樣表示非
$ 表示結尾的標誌
\b 單詞邊界的標誌，這樣理解，它表示單詞間那個看不到的東西，一側是單詞字元，一側是非單詞字元(包括各種標點和空白字元或中文)
\B 非單詞邊界的標誌 複製代碼 代碼如下:alert(/^居$/.test("居")); // 只限一個 居 true
alert(/^居$/.test("居居")); // 只限一個 居 false
alert(/\b啊/.test("a啊")); // true 思考一下：為什麼這個和下面的結果不一樣？？
alert(/\b啊/.test("-啊")); // false
alert(/\B啊/.test("a啊")); // false
alert(/\B啊/.test("-啊")); // true

alert(/\b啊/.test("a啊")); 中，"a"和"啊"之間存在一個\b，因為\b的左邊是"a"，右邊是"啊"，所以能夠匹配，為true；
相反：alert(/\b啊/.test("-啊")); 中，"啊"的左邊有個\b，但是\b的左邊是"-"，不是單詞字元，所以，不能匹配，為false
7、預定義類： \d \D \s \S \w \W .
\d 表示0-9的數字字元，相當於 [0-9]
\D 表示非0-9的數字字元，相當於 [^0-9] 複製代碼 代碼如下:alert(/\d/.test("1"));//true
alert(/\D/.test("1"));//false

\s 空白字元，相當於 [\n\r\f\t\x0B ] ，注意空格也算
\S 非空白字元，相當於 [^\n\r\f\t\x0B ] 複製代碼 代碼如下:alert(/\s/.test(" "));//true，空格也算
alert(/\S/.test("\n\r\f\t\x0B "));//false
alert(/\S/.test("\n\r\f\t\x0B \\"));//true

\w 單詞字元，相當於 [a-zA-Z0-9_]
\W 非單詞字元，相當於 [^a-zA-Z0-9_] 複製代碼 代碼如下:alert(/\w/.test("afdas"));//true
alert(/\W/.test("afdas"));//false

(點). 表示除了\n和\r意外的任一字元，相當於 [^\n\r] 複製代碼 代碼如下:alert(/./.test("\n\r"));//false ，只有這兩個，其他的都能夠被 . 匹配
alert(/./.test(" "));//true

8、RegExp執行個體方法：exec() test() match()
exec()：返回第一個匹配項資訊的數組，沒能匹配成功返回null，用法：pattern.exec(str); 需要注意有沒有"g"的不一樣 複製代碼 代碼如下:var re1 = /([a-z]*)bbb/;//貪婪
document.write(re1.test("abbbaabbb1234")+"<br />");//true
document.write(re1.exec("abbbaabbb1234")+"<br />");//abbbaabbb,abbbaa,這裡貪婪匹配到abbaabbb，然後$1為abbbaa，所以此時返回abbbaabbb,abbbaa
var re1 = /([a-z]*)bbb/g;//貪婪
document.write(re1.test("abbbaabbb1234")+"<br />");//true
document.write(re1.exec("abbbaabbb1234")+"<br />");//null //因為設定了g標識，並為貪婪匹配，而上面的test已經貪婪匹配到abbbaabbb，後面只有1234，所以此時匹配不到，返回null

test()：在只需要知道是否匹配，不需要知道具體匹配什麼文本的情況下，使用這個放個比較方便，用法：pattern.test(str); 複製代碼 代碼如下: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，因為設定了g，那麼這次的匹配是從1開始的
document.write(re1.test("abbbaabbb1234")+"<br />");//true

match()：這個函數比較特別，在設定g和不設定的情況下，表示形式完全不一樣，在未設定g的情況下，表現形式和exec一樣，設定了g的情況下，將返回所有匹配到的值的集合，用法：str.match(pattern) 複製代碼 代碼如下:var re1 = /([a-z]*)bbb/;//貪婪
document.write("abbbaabbb1234".match(re1)+"<br />");//abbbaabbb,abbbaa 這裡的abbbaabbb是匹配到的整個字串，abbbaa是匹配第一個小括弧的字串
var re1 = /([a-z]*)bbb/g;//貪婪
document.write("abbbaabbb1234".match(re1)+"<br />");//abbbaabbb，在設定了g後，match()返回所有匹配到的值

最後，exec()和未設定g的match()， 最後返回的數組的第一個元素是整個匹配的字串，如果模式中存在小括弧，那麼第二個元素是第一個括弧的匹配內容，以此類推，第三個、第四個。。。比如： 複製代碼 代碼如下:var re1 = /(a(b(c)))d/;
var str = "abcdd";
var matches = str.match(re1);
alert(matches[0]);//abcd //這裡是整個字串
alert(matches[1]);//abc //這裡是第一個小括弧
alert(matches[2]);//bc // 這裡是第二個小括弧
alert(matches[3]);//c // 這裡是第三個小括弧

9、貪婪和非貪婪匹配 ?
貪婪匹配：匹配到之後，繼續往後匹配到字串結束，然後選擇最長的。比如：對於字串"aaaaaab"，要匹配/a+/,那麼匹配的將是"aaaaaa"，而不是一個"a"。
非貪婪匹配：匹配到之後，馬上停止。比如：對於字串"aaaaaab"，要匹配/a+?/,那麼匹配的將是"a"，而不是一個"aaaaaa"。用法就是在量詞後面加"?"。 複製代碼 代碼如下:var re1 = /a+/;
var str = "aaaaaaa";
alert(str.match(re1));// aaaaaaa
var re1 = /a+?/;
var str = "aaaaaaa";
alert(str.match(re1));// a

下面給一個綜合一點的例子：講解了貪婪和非貪婪，全域g，exec和match的區別？？？ 複製代碼 代碼如下: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，所以此時返回abbbaabbb,abbbaa
document.write("abbbaabbb1234".match(re1)+"<hr>");//abbbaabbb,abbbaa,這裡貪婪匹配到abbaabbb，然後$1為abbbaa，所以此時返回abbbaabbb,abbbaa
document.write(re2.test("abbbaabbb1234")+"<br />");//true
document.write(re2.exec("abbbaabbb1234")+"<br />");//abbb,a ，這裡非貪婪匹配到abbb，然後$1為a，所以此時返回abbb,a
document.write("abbbaabbb1234".match(re2)+"<hr>");//abbb,a ，這裡非貪婪匹配到abbb，然後$1為a，所以此時返回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 ，因為設定了g標識，並為貪婪匹配，而上面的test已經貪婪匹配到abbbaabbb，後面只有1234，所以此時匹配不到，返回null
document.write("abbbaabbb1234".match(re3)+"<hr>");//abbbaabbb，注意在設定了g標識後，match只返回匹配到的所有值，這裡因為是貪婪匹配，所以匹配了abbbaabbb
document.write(re4.test("abbbaabbb1234")+"<br />");//true
document.write(re4.exec("abbbaabbb1234")+"<br />");//aabbb,aa ，因為設定了g標識，並為非貪婪匹配，而上面的test已經貪婪匹配到abbb，後面只有aabbb1234，所以此時在此匹配到aabbb，此時$1為aa，所以返回aabbb,aa
document.write("abbbaabbb1234".match(re4)+"<hr>");//abbb,aabbb 注意在設定了g標識後，match只返回匹配到的所有值，這裡因為是非貪婪匹配，所以匹配了abbb,aabbb

10、反向引用
Regex中的匹配組捕獲的子字串。每個反向引用都由一個編號或名稱來標識，並通過“\編號”標記法進行引用。 複製代碼 代碼如下:/(\w+)/.test("hello-world");
dwl(RegExp.$1);//hello
dwl(/(居)\1/.test("居居"))//true 這裡的\1表示第一個小括弧裡面的內容
dwl("aa bbb cccc".replace(/(\w{2,}) (\w{2,}) (\w{2,})/,"$3 $2 $1")); // cccc bbb aa

11、非捕獲性分組 ?:
並不是每個小括弧都能通過反向引用進行捕獲，在小括弧後面加上"?:"，即可進行設定非捕獲性分組。 複製代碼 代碼如下:/(\w+)-(\w+)/.test("hello-world");
alert(RegExp.$0);//undefined
alert(RegExp.$1);//""不會被捕獲
alert(RegExp.$2);//world

12、正向前瞻 ?= 和負向前瞻 ?!
(?=str) 匹配後面緊跟是str，比如 he 能夠通過模式 /he(?=llo)/ 匹配 字串 "hello"
(?!str) 匹配後面緊跟不是str，比如 hel 能夠通過模式 /he(?!llo)/ 匹配 字串 "hello" 複製代碼 代碼如下://這樣理解，將(?=str)或者(?!str)當做條件，然後考慮匹配其他的部分，匹配到了之後，再拿條件作對比，看符不符合
dwl("he-lloworld".match(/(\w+)(?=world)/g)); //llo 這裡先匹配(\w+)，找到兩個塊，he和lloworld，其中he不符合(?=world)，而lloworld，只要拆成llo和world串連，就符合(?=world)，即，llo連結了一個world，所以這裡匹配了llo
dwl("he-lloworld".match(/(\w+)(?!world)/g)); //he,lloworld 這裡先匹配(\w+)，找到兩個塊，he和lloworld，其中he不符合(?=world)，而lloworld，只要不拆，就符合(?!world)，即，llo連結了一個world，所以這裡匹配了he,lloworld

13、出幾個執行個體題目？
a、講一個字串中的所有英文單字首大寫？ 複製代碼 代碼如下:var str = "你好hello世界woRld，我i愛love你you";
var str = str.toLowerCase().replace(/\b\w|\s\w/g,function(s){
return s.toUpperCase();
});
alert(str)

b、去除html代碼中的所有標籤，除了a標籤 複製代碼 代碼如下:var str = "<p><a href='http://www.jb51.net/'>居居居居居居居居居</a ></p><hr/><p> by <em>居居居居居居居居居</em></p>";
var str = str.replace(/<(?!(\/?a))(.|\s)*?>/g,""); // 這裡用到了 負前瞻
alert(str); // <a href='http://www.jb51.net/'>居居居居居居居居居</a > by 居居居居居居居居居

下一節講一下，常用的Regex，整理總結~~~！！！！！樓主喝口水，這麼點東西寫了快一天。。。