濮阳杆衣贸易有限公司

主頁 > 知識庫 > javascript高級程序設計(第三版)學習筆記(一) 正則表達式整理

javascript高級程序設計(第三版)學習筆記(一) 正則表達式整理

熱門標簽:哈爾濱公司外呼系統(tǒng)代理 自己做的電銷機器人 上海銷售電銷機器人軟件 惠安地圖標注 淄博市張店區(qū)地圖標注 浙江營銷外呼系統(tǒng)有哪些 山東外呼系統(tǒng)聯系方式 遼寧秒客來電話機器人 地圖標注店鋪地圖標注酒店
1、創(chuàng)建正則表達式
第一種方式:注意這里的正則表達式不能使用單引號或者雙引號,如下
var pattern1 = /[abc]/i; // 匹配第一個"a"或"b"或"c",不區(qū)分大小寫
第二種方式:使用RegExp構造函數創(chuàng)建,該構造函數傳入兩個參數,都是字符串,所以需要特別注意"\"符號的轉換,所有元字符(下面有講元字符)需要雙重轉義,如下
復制代碼 代碼如下:

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、如果這里的正則表達式,是通過字符串和某個變量動態(tài)組合而成的,如何使用第一種方式創(chuàng)建正則表達式?
顯然,用第二種創(chuàng)建正則表達式的方式,肯定沒有任何問題,因為,傳入的第一個參數本身就是一個字符串。要用第一種方式創(chuàng)建,這里需要用到eval()函數,如下
復制代碼 代碼如下:

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

b、上面兩種創(chuàng)建方法有什么不同之處?
《javascript高級程序設計(第三版)》中講:區(qū)別在于是否共享,使用第一種方式創(chuàng)建的正則,共享,第二種不共享。經樓主實踐發(fā)現結果有點出入,兩種創(chuàng)建方式結果一樣,都是(true true true),各位可以自行測試。所以這里MARK一下,這兩種創(chuàng)建方式沒什么區(qū)別。
復制代碼 代碼如下:

var re = null,i;
for(i=0;i3;i++){
re = /cat/g;//書:實例屬性不會重置,下面的結果應該是 true false true
alert(re.test("catasdfdfdf"));
}
for(i=0;i3;i++){
re = new RegExp("cat","g");//書:實例屬性會重置,下面的結果應該是 true true true
alert(re.test("catasdfdfdf"));
}

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

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

3、RegExp實例屬性
global、ignoreCase、multiline、lastIndex、source,這些屬性用處不大,其中l(wèi)astIndex可用于調試,簡單示例
復制代碼 代碼如下:

var patt1 = /cat/g;
patt1.test("catasdfdfdf");
dw(patt1.global); // 是否設置了g,全局模式 // true
dw(patt1.ignoreCase); // 是否設置了i,不區(qū)分大小寫 // false
dw(patt1.multiline); // 是否設置了m,多行匹配,到了一行末尾,能夠繼續(xù)匹配下一行 // false
dw(patt1.lastIndex); // 表示開始搜索下一個匹配項的開始位置,第一次為0 // 3
dw(patt1.source); // 返回正則表達式字面量 // 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、貪婪和非貪婪匹配 ?
貪婪匹配:匹配到之后,繼續(xù)往后匹配到字符串結束,然后選擇最長的。比如:對于字符串"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的區(qū)別???
復制代碼 代碼如下:

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、反向引用
正則表達式中的匹配組捕獲的子字符串。每個反向引用都由一個編號或名稱來標識,并通過“\編號”表示法進行引用。
復制代碼 代碼如下:

/(\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 >居居居居居居居居居/a >/p>hr/>p> by em>居居居居居居居居居/em>/p>";
var str = str.replace(/(?!(\/?a))(.|\s)*?>/g,""); // 這里用到了 負前瞻
alert(str); // a >居居居居居居居居居/a > by 居居居居居居居居居

下一節(jié)講一下,常用的正則表達式,整理總結~~~?。。。。侵骱瓤谒?,這么點東西寫了快一天。。。

標簽:銅川 宣城 重慶 無錫 西安 長沙 泰州 綿陽

巨人網絡通訊聲明:本文標題《javascript高級程序設計(第三版)學習筆記(一) 正則表達式整理》,本文關鍵詞  javascript,高級,程序設計,;如發(fā)現本文內容存在版權問題,煩請?zhí)峁┫嚓P信息告之我們,我們將及時溝通與處理。本站內容系統(tǒng)采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《javascript高級程序設計(第三版)學習筆記(一) 正則表達式整理》相關的同類信息!
  • 本頁收集關于javascript高級程序設計(第三版)學習筆記(一) 正則表達式整理的相關信息資訊供網民參考!
  • 推薦文章
    同心县| 团风县| 深州市| 虞城县| 都江堰市| 旬邑县| 汽车| 马鞍山市| 柞水县| 阳西县| 惠安县| 乾安县| 内乡县| 临洮县| 兰考县| 民乐县| 赫章县| 吴堡县| 湛江市| 裕民县| 南平市| 武功县| 永清县| 正安县| 兴海县| 延吉市| 建宁县| 鹤峰县| 钟祥市| 尼勒克县| 石柱| 花垣县| 平顺县| 甘孜| 大足县| 富民县| 灵宝市| 页游| 平度市| 勐海县| 北辰区|