正則表達式基礎(1)
-
復習字符串操作
-
search 查找 -> 首次出現位置，返回索引值 && 不存在返回 -1
-
substring 獲取子字符串 -> 按索引取，取頭不取尾，返回字符串
-
charAt 獲取某個字符 -> 按索引取返回字符(串) && 索引不存在的返回空字符串
-
split 分割字符串，獲得數組 -> 按分隔符截取，返回字符串內容的數組
正則表達式基礎(2)
-
什么是正則表達式
-
什么叫“正則”
-
規則、模式
-
強大的字符串匹配工具
-
是一種正常人類很難讀懂的文字
-
RegExp對象
-
JS風格——new RegExp(“a”, “i”)
-
perl風格——/a/i
字符串與正則配合(1)
-
search
-
字符串搜索
-
返回出現的位置
-
var str = 'abcdef' alert(str.search('b')); === alert(str.search(/b/)); -> 1
-
忽略大小寫：i——ignore
-
var str = 'aBcdef' alert(str.search(/b/i)); -> 1
-
判斷瀏覽器類型
-
e.g. 簡單校驗瀏覽器類型
1 <script> 2 // alert(window.navigator.userAgent)// 瀏覽器信息 3 if(window.navigator.userAgent.search(/firefox/i) != -1) { 4 alert('ff') 5 }else if (window.navigator.userAgent.search(/chrome/i) != -1){ 6 alert('chrome') 7 }else if(window.navigator.userAgent.search(/msie 9/i) != -1){ 8 alert('IE9') 9 } 10 //.... 11 </script>
-
match
-
獲取匹配的項目
-
量詞：+
-
量詞變化：\d、\d\d和\d+
-
全局匹配：g——global
例子：找出所有數字
1 var str = 'sdd 233 sd 333 3 sddw33 4589 0' 2 var re = /\d/g 3 4 alert(str.match(re) ->
結果：
字符串與正則配合(2)
-
replace
-
替換所有匹配
-
返回替換后的字符串
-
var str = 'abAcdef' alert(str.replace(/a/gi,'T')) ->'TbTcdef'
-
例子：敏感詞過濾
1 <textarea id="area1" cols="30" rows="10"></textarea> 2 <button id="btn">屏蔽敏感詞</button> 3 <textarea id="area2" cols="30" rows="10"></textarea>
1 <script> 2 var oAr1 = document.getElementById('area1') 3 var oAr2 = document.getElementById('area2') 4 var oBtn = document.getElementById('btn') 5 6 var re = /我們|你們|他們/g 7 oBtn.onclick = function() { 8 oAr2.value = oAr1.value.replace(re, '***') 9 } 10 </script>
字符類(1)
-
任意字符
-
[abc]
-
例子：o[usb]t——obt、ost、out ； 看仔細 /[a,b]/ === /a|,|b/; /[23 4]/ === /2|3| |4/
-
re = /o[usb]t/; === re = /out|ost|obt/
-
范圍
-
[a-z]、[0-9]
-
例子：id[0-9]——id0、id5
-
排除
-
[^a]
-
例子：o[^0-9]t——oat、o?t、o t
-
字符類(2)
-
組合
-
[a-z0-9A-Z]
-
實例：偷小說
-
e.g. var re =/\<[^<>]+\>/g === re = /<[^<>]+>/g
1 <textarea id="area1" cols="30" rows="10"></textarea> 2 <button id="btn">轉換</button> 3 <textarea id="area2" cols="30" rows="10"></textarea>
1 <script> 2 var oAr1 = document.getElementById('area1') 3 var oAr2 = document.getElementById('area2') 4 var oBtn = document.getElementById('btn') 5 6 var re = /<[^<>]+>/g 7 oBtn.onclick = function() { 8 oAr2.value = oAr1.value.replace(re, '') 9 } 10 </script>
-
過濾HTML標簽
-
自定義innerText方法
-
轉義字符
-
.（點）——任意字符 => \. 表示 普通的 .
-
\d [0-9]、
-
\w [a-z0-9_]、
-
\s 空白字符 如 空格 制表符等
-
e.g. 去除空白字符 re= /\s+/g
-
\D [^0-9]、\W [^a-z0-9_]、\S
量詞
-
什么是量詞
-
出現的次數
-
{n,m}，至少出現n次，最多m次
-
例子：查找QQ號
-
常用量詞
-
{n,} 至少n次
-
{n,m } 最少n次，最多m次
-
{n， } 最少n次，最多不限
-
{，m} 最少不限，最多m次
-
{n} 正好n次
-
e.g. 匹配正確的QQ號
1 <script> 2 var str = '我的QQ號是643609709，你的是2332129845' 3 var re = /[1-9]\d{4,10}/ //表示如qq號那樣5-11位的純數字串 4 5 alert(str.match(re)) 6 </script>
-
* 任意次 {0,} 表示可以不出現，不建議使用，會引發一些小問題
-
？ 零次或一次 {0,1} 表示可以出現或不出現，出現也只是出現一次
-
+ 一次或任意次， 實際是{1,}的簡寫
e.g. 郵箱正則匹配 注意：一般做校驗類的， 都要加行首行尾來限定全部內容
1 <input id="text" type="text" placeholder="郵箱" /> 2 <button type="submit">校驗</button>
1 <script> 2 // 一串字母、數字、下划線 @ 一串英文、數字 . 一串英文(長度是2-4) 3 // \w+ @ [a-z0-9]+ \. [a-z]{2-4} 4 // \w+@[a-z0-9]+\.[a-z]{2-4} 5 6 var oText = document.getElementById('text') 7 var oBtn = document.getElementsByTagName('button')[0] 8 //var re = /\w+@[a-z0-9]+\.[a-z]{2,4}/ //存在bug 需要限定在行首行尾 9 var re = /^\w+@[a-z0-9]+\.[a-z]{2,4}$/ 10 oBtn.onclick = function() { 11 if (re.test(oText.value)) { 12 alert('郵箱正確') 13 } else { 14 oText.value = '' 15 alert('郵箱錯誤，請重新輸入') 16 } 17 } 18 </script>
e.g. 刪除行首行尾多余空格 注意：正則加g匹配查找到的全部內容
// 行首空格 行尾空格
// ^\s+ \s+$
1 var re = /^\s+|\s+$/ 2 alert(str.replace(re,''))
對比結果：
-
高級表單校驗
-
校驗郵箱
-
行首行尾 ^\w+@[a-z0-9]+\.[a-z]{2,4}$
-
去除空格：^\s*|\s*$ g
-
匹配中文：[\u4e00-\u9fa5]
-
-
完美版getByClass(oParent, sClass)
單詞邊界：\b
1 var re = new ReqExp('\\b'+sClass +'\\b', 'i')