第十八節 JS中的正則表達式
復習字符串操作:
search 查找
substring 獲取子字符串
charAt 獲取某個字符
split 分割字符串,獲取數組
1 var str = ‘abcdefghijk‘; 2 alert(str.search(‘b‘)); //返回1,表示b在字符串中的位置是1,不存在的字符返回-1 3 alert(str.substring(2,5)); //包含開頭不包含結尾,所以返回cde 4 alert(str.substring(3)); //返回defghijk 5 alert(str.charAt(3)); //d 6 alert(str.split(‘‘)); //返回“a,b,c,d,e,f,g,h,i,j,k”
找出字符串中的所有數字
用傳統字符串操作完成
1 //找出str1中的所有數字 2 var str1 = ‘12 sfdg-=/*sfgh85gdhj8745‘; 3 var arr = []; 4 var tmp = ‘‘; 5 6 for (var i = 0; i < str1.length; i++) { 7 if (str1.charAt(i) >= ‘0‘ && str1.charAt(i) <= 9) {8 tmp+=str1.charAt(i); 9 } else { 10 if (tmp){ 11 arr.push(tmp); 12 tmp = ‘‘; 13 } 14 } 15 } 16 if (tmp){ 17 arr.push(tmp); 18 tmp = ‘‘; 19 } 20 alert(arr); //返回12,85,8745
用正則表達式完成
1 var str1 = ‘12 sfdg-=/*sfgh85gdhj8745‘;2 alert(str1.match(/\d+/g)); //返回12,85,8745,其中\d表示實數,g=global(全局、全部)
什麽是正則表達式:
什麽是正則:其實就是一種規則或模式,比如說郵箱的表示規則是:"一串英文、數字和下劃線組合@一串英文數字組合.一串英文"
正則表達是也是一種,強大的字符串匹配工具,是一種正常人類很難讀懂的文字
RegExp對象
JS風格——new RegExp(‘a‘, ‘i‘);
perl風格——/a/i
字符串與正則表達式:
search:字符串搜索
返回出現的位置
忽略大小寫:i——ignore
判斷瀏覽器類型
1 // var re = new RegExp(‘a‘, ‘i‘); //最簡單的正則表達式,什麽也不表示,就表示一個“a”本身,JS風格的寫法,其中i=ignore表示忽略大小寫 2 var re = /a/i; //另一種寫法,意義與上句相同,是一種perl風格的寫法,其中i=ignore表示忽略大小寫 3 var str = ‘abcdef‘; 4 alert(str.search(re)); //返回“0”,表示a在字符串的第0位
match:獲取匹配的項目
量詞:表示個數,即被求項目的個數;
+:表示若幹
量詞變化:\d、\d\d和\d+
全局匹配:g——global
例子:找出所有數字
1 //找第一個數字出現的位置, 2 var str = ‘abf ,=-1sdf65‘; 3 var re = /\d/g; //其中\d表示數字,g=global,找到全部 4 alert(str.match(re)); //返回1,6,5 5 6 var re1 = /\d+/g; //所以上面不帶加號,表示一個數字一個數字獲取的,而現在是一串數字一串數字獲取的 7 alert(str.match(re1)); //返回1,65
replace
替換所有匹配
返回替換後的字符串
1 //replace的使用 2 var str = ‘alghqaerghjcvbagc‘; 3 // alert(str.replace(‘a‘,‘0‘)); //返回0lghqaerghjcvbagc,可見該句只把字符串中的第一個a替換成了0,qita沒變 4 5 //當我們用正則表達式時: 6 // var re = /a/; 7 // alert(str.replace(re, ‘0‘)); //返回0lghqaerghjcvbagc,與上面一樣 8 9 var re = /a/g; 10 alert(str.replace(re, ‘0‘)); //返回0lghq0erghjcvb0gc,此時a全部被替換成0
例子:敏感詞過濾
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>敏感詞過濾</title> 6 <script> 7 window.onload = function () { 8 var oTxt1 = document.getElementById(‘txt1‘); 9 var oTxt2 = document.getElementById(‘txt2‘); 10 var oBtn = document.getElementById(‘btn1‘); 11 12 oBtn.onclick = function () { 13 var re = /a|g|j|d|S/gi; //把agjS作為敏感詞過濾掉,g表示全部,i表示忽略大小寫,gi或ig不影響 14 15 oTxt2.value = oTxt1.value.replace(re, ‘***‘); 16 }; 17 }; 18 </script> 19 </head> 20 <body> 21 <textarea id="txt1" rows="10" cols="40"></textarea><br> 22 <button id="btn1">過濾</button><br> 23 <textarea id="txt2" rows="10" cols="40"></textarea> 24 </body> 25 </html>View Code
字符串:[]在正則表達式中被稱作元字符,具有以下功能
任意字符:
[abc]:表示“或”——任選的意思,即任選一個“[]”內的字母,例子:o[usb]t——ost、obt、out
範圍:
[a-z]、[0-9](相當於\d)例子:id[0-9]——id0、id5
排除:
[^a](除了a以外的其他字符)例子:o[^0-9]t——oat、o?t、o t(除了數字之外)、[^a-z0-9](除了英文和數字)
組合:
[a-z0-9A-Z]
實例:采集小說,說白了就是偷小說,在原來網站上打開某個小說,然後查看打開網頁的源碼,然後把文字復制出來。然後再把文本裏面摻雜的HTML標簽過濾掉,下面是實現方法
自定義innerText方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>采集網頁小說</title> 6 <script> 7 window.onload = function () { 8 var oTxt1 = document.getElementById(‘txt1‘); 9 var oTxt2 = document.getElementById(‘txt2‘); 10 var oBtn = document.getElementById(‘btn1‘); 11 12 oBtn.onclick = function () { 13 var re = /<[^<>]+>/g; //<內部除了“<>”外的所有字符+> 14 oTxt2.value = oTxt1.value.replace(re, ‘‘); 15 }; 16 }; 17 </script> 18 </head> 19 <body> 20 <textarea id="txt1" rows="10" cols="100"></textarea><br> 21 <button id="btn1">過濾</button><br> 22 <textarea id="txt2" rows="10" cols="100"></textarea> 23 </body> 24 </html>View Code
轉義字符:
. (點:通配符,表示任意字符):盡量少用或不用,因為容易出錯
\d(數字,即0-9——[0-9])
\w(英文、數字和下劃線——[a-z0-9_])
\s(空白字符:空格、Tab等)
\D(除了數字——[^0-9])
\W(除了英文、數字和下劃線——[^a-z0-9_])
\S(除了空白字符:空格、Tab等)
量詞:其實就是指某個值出現的次數
常用量詞:
{n,m},至少出現n次,最多m次
{n,} 至少n次
* 任意次,相當於{0,},不建議使用,經常出錯,所以幾乎用不到
? 0次或一次,即可有可無,等價於{0,1}
+ 一次或任意次,即至少一次,等價於{1,}
{n} 正好出現n次
例子:查找QQ號(目前QQ號大多是為5-11為,且第一個數字不能為0),則有:[1-9]\d{4,10}
1 <script> 2 window.onload = function () { 3 var oTxt = document.getElementById(‘txt1‘); 4 var oBtn = document.getElementById(‘btn1‘); 5 6 oBtn.onclick = function () { 7 var txt = oTxt.value; 8 var re = /^[1-9]\d{4,10}$/; 9 if (txt.match(re)) { 10 alert("這串數字符合QQ號的規則!"); 11 } else { 12 alert("這串數字不符合QQ號的規則!"); 13 } 14 }; 15 }; 16 </script> 17 <body> 18 <input id="txt1" type="text"/> 19 <button id="btn1">檢查一串數字是否符合QQ號的規則</button> 20 </body>
再如:固定電話的號碼:區號(第一位為0,共3-4為)(區號可有可無)-號碼(一般為8為,首位不能為0)-分機號(一般不超過5位,可有可無),則有:(0\d{2,3}-)?[1-9]\d{7}(-\d{1,5})?
常用正則例子:郵箱(一串英文、數字和下劃線組合@一串英文數字組合.一串英文)校驗——(\w+@[a-z0-9]+\.[a-z]——其中“\.”表示對“.”的轉義,因為“.”在正則表達式中有特殊含義)
行首:字符串的開頭,在正則表達式中用“^”表示行首
行尾:字符串的結尾,在正則表達式中用“$”表示行尾
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>郵箱校驗</title> 6 <script> 7 window.onload = function () { 8 var oTxt = document.getElementById(‘txt1‘); 9 var oBtn = document.getElementById(‘btn1‘); 10 11 oBtn.onclick = function () { 12 var re = /^\w+@[a-z0-9]+\.[a-z]+$/i; 13 14 if (re.test(oTxt.value)) { //正則自帶測試匹配的函數 test 15 alert("是合法郵箱!"); 16 } else { 17 alert("郵箱不合法!"); 18 } 19 }; 20 }; 21 //但是test()有一個小問題:只要字符串的部分符合要求,它就返回true,所以我們要把行首和行尾封住, 22 // 如“/^\w+@[a-z0-9]+\.[a-z]+$/i”,意思就是說,只有和行首和行尾中間的東西匹配成功,才表示匹配成功 23 </script> 24 </head> 25 <body> 26 <input id="txt1" type="text"/> 27 <button id="btn1">郵箱校驗</button> 28 </body> 29 </html>View Code
第十八節 JS中的正則表達式