詳解JavaScript高級(jí)正則表達(dá)式
JavaScript高級(jí)正則表達(dá)式
1.正則表達(dá)式概述
1.1什么是正則表達(dá)式
正則表達(dá)式( Regular Expression )是用于匹配字符串中字符組合的模式。在JavaScript中,正則表達(dá)式也是對(duì)象。
正則表通常被用來檢索、替換那些符合某個(gè)模式(規(guī)則)的文本,例如驗(yàn)證表單:用戶名表單只能輸入英文字母、數(shù)字或者下劃線, 昵稱輸入框中可以輸入中文(匹配)。此外,正則表達(dá)式還常用于過濾掉頁(yè)面內(nèi)容中的一些敏感詞(替換),或從字符串中獲取我們想要的特定部分(提取)等 。
其他語(yǔ)言也會(huì)使用正則表達(dá)式,本階段我們主要是利用JavaScript 正則表達(dá)式完成表單驗(yàn)證。
1.2 正則表達(dá)式的特點(diǎn)
靈活性、邏輯性和功能性非常的強(qiáng)。
可以迅速地用極簡(jiǎn)單的方式達(dá)到字符串的復(fù)雜控制。
對(duì)于剛接觸的人來說,比較晦澀難懂。比如:^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
實(shí)際開發(fā),一般都是直接復(fù)制寫好的正則表達(dá)式. 但是要求會(huì)使用正則表達(dá)式并且根據(jù)實(shí)際情況修改正則表達(dá)式. 比如用戶名: /^[a-z0-9_-]{3,16}$/
2.正則表達(dá)式在js中的使用
2.1正則表達(dá)式的創(chuàng)建
在 JavaScript 中,可以通過兩種方式創(chuàng)建一個(gè)正則表達(dá)式。
方式一:通過調(diào)用RegExp對(duì)象的構(gòu)造函數(shù)創(chuàng)建
var regexp = new RegExp(/123/);console.log(regexp);
方式二:利用字面量創(chuàng)建 正則表達(dá)式
var rg = /123/;
2.2測(cè)試正則表達(dá)式
test() 正則對(duì)象方法,用于檢測(cè)字符串是否符合該規(guī)則,該對(duì)象會(huì)返回 true 或 false,其參數(shù)是測(cè)試字符串。
var rg = /123/; console.log(rg.test(123));//匹配字符中是否出現(xiàn)123 出現(xiàn)結(jié)果為true console.log(rg.test('abc'));//匹配字符中是否出現(xiàn)123 未出現(xiàn)結(jié)果為false
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-gN4RwCa1-1640762098190)(images/img4.png)]
3.正則表達(dá)式中的特殊字符
3.1正則表達(dá)式的組成
一個(gè)正則表達(dá)式可以由簡(jiǎn)單的字符構(gòu)成,比如 /abc/,也可以是簡(jiǎn)單和特殊字符的組合,比如 /ab*c/ 。其中特殊字符也被稱為元字符,在正則表達(dá)式中是具有特殊意義的專用符號(hào),如 ^ 、$ 、+ 等。
3.2邊界符
邊界符 | 說明 |
---|---|
^ | 表示匹配行首的文本(以誰(shuí)開始) |
$ | 表示匹配行尾的文本(以誰(shuí)結(jié)束) |
如果 ^和 $ 在一起,表示必須是精確匹配。
var rg = /abc/; // 正則表達(dá)式里面不需要加引號(hào) 不管是數(shù)字型還是字符串型 // /abc/ 只要包含有abc這個(gè)字符串返回的都是true console.log(rg.test('abc')); console.log(rg.test('abcd')); console.log(rg.test('aabcd')); console.log('---------------------------'); var reg = /^abc/; console.log(reg.test('abc')); // true console.log(reg.test('abcd')); // true console.log(reg.test('aabcd')); // false console.log('---------------------------'); var reg1 = /^abc$/; // 精確匹配 要求必須是 abc字符串才符合規(guī)范 console.log(reg1.test('abc')); // true console.log(reg1.test('abcd')); // false console.log(reg1.test('aabcd')); // false console.log(reg1.test('abcabc')); // false
3.3字符類
字符類表示有一系列字符可供選擇,只要匹配其中一個(gè)就可以了。所有可供選擇的字符都放在方括號(hào)內(nèi)。
3.3.1 [] 方括號(hào)
表示有一系列字符可供選擇,只要匹配其中一個(gè)就可以了
var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回為true console.log(rg.test('andy'));//true console.log(rg.test('baby'));//true console.log(rg.test('color'));//true console.log(rg.test('red'));//false var rg1 = /^[abc]$/; // 三選一 只有是a 或者是 b 或者是c 這三個(gè)字母才返回 true console.log(rg1.test('aa'));//false console.log(rg1.test('a'));//true console.log(rg1.test('b'));//true console.log(rg1.test('c'));//true console.log(rg1.test('abc'));//true ---------------------------------------------------------------------------------- var reg = /^[a-z]$/ //26個(gè)英文字母任何一個(gè)字母返回 true - 表示的是a 到z 的范圍 console.log(reg.test('a'));//true console.log(reg.test('z'));//true console.log(reg.test('A'));//false ----------------------------------------------------------------------------------- //字符組合 var reg1 = /^[a-zA-Z0-9]$/; // 26個(gè)英文字母(大寫和小寫都可以)任何一個(gè)字母返回 true ------------------------------------------------------------------------------------ //取反 方括號(hào)內(nèi)部加上 ^ 表示取反,只要包含方括號(hào)內(nèi)的字符,都返回 false 。 var reg2 = /^[^a-zA-Z0-9]$/; console.log(reg2.test('a'));//false console.log(reg2.test('B'));//false console.log(reg2.test(8));//false console.log(reg2.test('!'));//true
3.3.2量詞符
量詞符用來設(shè)定某個(gè)模式出現(xiàn)的次數(shù)。
量詞 | 說明 |
---|---|
* | 重復(fù)0次或更多次 |
+ | 重復(fù)1次或更多次 |
? | 重復(fù)0次或1次 |
{n} | 重復(fù)n次 |
{n,} | 重復(fù)n次或更多次 |
{n,m} | 重復(fù)n到m次 |
3.3.3用戶名表單驗(yàn)證
功能需求:
1.如果用戶名輸入合法, 則后面提示信息為: 用戶名合法,并且顏色為綠色
2如果用戶名輸入不合法, 則后面提示信息為: 用戶名不符合規(guī)范, 并且顏色為紅色
分析:
- 用戶名只能為英文字母,數(shù)字,下劃線或者短橫線組成, 并且用戶名長(zhǎng)度為6~16位.
- 首先準(zhǔn)備好這種正則表達(dá)式模式/$[a-zA-Z0-9-_]{6,16}^/
- 當(dāng)表單失去焦點(diǎn)就開始驗(yàn)證.
- 如果符合正則規(guī)范, 則讓后面的span標(biāo)簽添加 right類.
- 如果不符合正則規(guī)范, 則讓后面的span標(biāo)簽添加 wrong類.
<input type="text" class="uname"> <span>請(qǐng)輸入用戶名</span> <script> // 量詞是設(shè)定某個(gè)模式出現(xiàn)的次數(shù) var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 這個(gè)模式用戶只能輸入英文字母 數(shù)字 下劃線 中劃線 var uname = document.querySelector('.uname'); var span = document.querySelector('span'); uname.onblur = function() { if (reg.test(this.value)) { console.log('正確的'); span.className = 'right'; span.innerHTML = '用戶名格式輸入正確'; } else { console.log('錯(cuò)誤的'); span.className = 'wrong'; span.innerHTML = '用戶名格式輸入不正確'; } } </script>
3.3.4 括號(hào)總結(jié)
1.大括號(hào) 量詞符. 里面表示重復(fù)次數(shù)
2.中括號(hào) 字符集合。匹配方括號(hào)中的任意字符.
3.小括號(hào)表示優(yōu)先級(jí)
3.4預(yù)定義類
預(yù)定義類指的是某些常見模式的簡(jiǎn)寫方式.
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-cETagwqf-1640762098196)(images/img3.png)]
案例:驗(yàn)證座機(jī)號(hào)碼
var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/; var reg = /^\d{3,4}-\d{7,8}$/;
表單驗(yàn)證案例
//手機(jī)號(hào)驗(yàn)證:/^1[3|4|5|7|8][0-9]{9}$/; //驗(yàn)證通過與不通過更換元素的類名與元素中的內(nèi)容 if (reg.test(this.value)) { // console.log('正確的'); this.nextElementSibling.className = 'success'; this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您輸入正確'; } else { // console.log('不正確'); this.nextElementSibling.className = 'error'; this.nextElementSibling.innerHTML = '<i class="error_icon"></i>格式不正確,請(qǐng)從新輸入 '; }
//QQ號(hào)驗(yàn)證: /^[1-9]\d{4,}$/; //昵稱驗(yàn)證:/^[\u4e00-\u9fa5]{2,8}$/ //驗(yàn)證通過與不通過更換元素的類名與元素中的內(nèi)容 ,將上一步的匹配代碼進(jìn)行封裝,多次調(diào)用即可 function regexp(ele, reg) { ele.onblur = function() { if (reg.test(this.value)) { // console.log('正確的'); this.nextElementSibling.className = 'success'; this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您輸入正確'; } else { // console.log('不正確'); this.nextElementSibling.className = 'error'; this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 格式不正確,請(qǐng)從新輸入 '; } } };
//密碼驗(yàn)證:/^[a-zA-Z0-9_-]{6,16}$/
//再次輸入密碼只需匹配與上次輸入的密碼值 是否一致
3.5正則替換replace
replace() 方法可以實(shí)現(xiàn)替換字符串操作,用來替換的參數(shù)可以是一個(gè)字符串或是一個(gè)正則表達(dá)式。
var str = 'andy和red'; var newStr = str.replace('andy', 'baby'); console.log(newStr)//baby和red //等同于 此處的andy可以寫在正則表達(dá)式內(nèi) var newStr2 = str.replace(/andy/, 'baby'); console.log(newStr2)//baby和red //全部替換 var str = 'abcabc' var nStr = str.replace(/a/,'哈哈') console.log(nStr) //哈哈bcabc //全部替換g var nStr = str.replace(/a/a,'哈哈') console.log(nStr) //哈哈bc哈哈bc //忽略大小寫i var str = 'aAbcAba'; var newStr = str.replace(/a/gi,'哈哈')//"哈哈哈哈bc哈哈b哈哈"
案例:過濾敏感詞匯
<textarea name="" id="message"></textarea> <button>提交</button> <div></div> <script> var text = document.querySelector('textarea'); var btn = document.querySelector('button'); var div = document.querySelector('div'); btn.onclick = function() { div.innerHTML = text.value.replace(/激情|gay/g, '**'); } </script>
4.面試題
一、如何讓事件先冒泡后捕獲
原本的事件流中,是先捕獲再冒泡。
對(duì)于目標(biāo)元素來說,如果DOM節(jié)點(diǎn)通過addEventListener同時(shí)綁定了兩個(gè)事件監(jiān)聽函數(shù),一個(gè)用于捕獲,一個(gè)用于冒泡,那么兩個(gè)事件的執(zhí)行順序是按照代碼添加的順序執(zhí)行的。所以,先綁定冒泡的函數(shù),再綁定捕獲的函數(shù),即可實(shí)現(xiàn)。
對(duì)于非目標(biāo)元素來說,可以給捕獲事件的處理程序添加一個(gè)定時(shí)器,將處理程序推入下一個(gè)宏任務(wù)執(zhí)行。
二、說一下事件代理
事件委托是指 不在子節(jié)點(diǎn)單獨(dú)設(shè)置事件監(jiān)聽器,而將事件監(jiān)聽器設(shè)置在父節(jié)點(diǎn)上,再利用冒泡原理使每一個(gè)子節(jié)點(diǎn)都能觸發(fā)該事件。
事件委托的優(yōu)點(diǎn):只操作一次Dom,提高了程序的性能。
常用于:ul和li標(biāo)簽的事件監(jiān)聽,一般采用事件委托機(jī)制將事件監(jiān)聽器綁定在ul上。
還適合動(dòng)態(tài)元素的綁定,新添加的子元素不需單獨(dú)添加事件處理程序。
(1)了解事件代理嗎,這樣做有什么好處
事件代理/事件委托:利用了事件冒泡,只指定一個(gè)事件處理程序,就可以管理某一類型的事件,簡(jiǎn)而言之:事件代理就是說我們將事件添加到本來要添加的事件的父節(jié)點(diǎn),將事件委托給父節(jié)點(diǎn)來觸發(fā)處理函數(shù),這通常會(huì)使用在大量的同級(jí)元素需要添加同一類事件的時(shí)候,比如一個(gè)動(dòng)態(tài)的非常多的列表,需要為每個(gè)列表項(xiàng)都添加點(diǎn)擊事件,這時(shí)就可以使用事件代理,通過判斷e.target.nodeName來判斷發(fā)生的具體元素,這樣做的好處是減少事件綁定,同事動(dòng)態(tài)的DOM結(jié)構(gòu)任然可以監(jiān)聽,事件代理發(fā)生在冒泡階段
(2)事件委托以及冒泡原理:
事件委托是利用冒泡階段的運(yùn)行機(jī)制來實(shí)現(xiàn)的,就是把一個(gè)元素響應(yīng)事件的函數(shù)委托到另一個(gè)元素,一般是把一組元素的事件委托到他的父元素上。
委托的優(yōu)點(diǎn)是減少內(nèi)存消耗,節(jié)約效率動(dòng)態(tài)綁定事件
事件冒泡,就是元素自身的事件被觸發(fā)后,如果父元素有相同的事件,如onclick事件,那么元素本身的觸發(fā)狀態(tài)就會(huì)傳遞,也就是冒到父元素,父元素的相同事件也會(huì)一級(jí)一級(jí)根據(jù)嵌套關(guān)系向外觸發(fā),直到document/window,冒泡過程結(jié)束。
(3)事件代理在捕獲階段的實(shí)際應(yīng)用:
可以在父元素層面阻止事件向子元素傳播,也可代替子元素執(zhí)行某些操作。
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
第一個(gè)JavaScript入門基礎(chǔ) document.write輸出
關(guān)于JavaScript,他是一個(gè)OOSP(面向?qū)ο竽_本語(yǔ)言)他是用來創(chuàng)建動(dòng)態(tài)網(wǎng)站,增強(qiáng)用戶界面的一門技術(shù)。如果你想了解更多關(guān)于JavaScript的信息,請(qǐng)去維基百科查詢。2010-02-02javascript開發(fā)技術(shù)大全-第3章 js數(shù)據(jù)類型
字符串類型(string) :由unicode字符、數(shù)字、標(biāo)點(diǎn)符號(hào)組成,在javascript中沒有char字符類型 ,即使只表示一個(gè)字符,也必須用到字符串2011-07-07javascript如何創(chuàng)建表格(javascript繪制表格的二種方法)
利用js來動(dòng)態(tài)創(chuàng)建表格有兩種格式,appendChild()和insertRow、insertCell()。兩種方式其實(shí)差不多,但第一種有可能在IE上有問題,所以推薦大家使用第二種方法,看下面的解決和使用方法2013-12-12JS中attr和prop屬性的區(qū)別以及優(yōu)先選擇示例介紹
這篇文章主要介紹了JS中attr和prop屬性的區(qū)別以及優(yōu)先選擇,需要的朋友可以參考下2014-06-06JavaScript italics方法入門實(shí)例(把字符串顯示為斜體)
這篇文章主要介紹了JavaScript italics方法入門實(shí)例,italics方法用于把字符串顯示為斜體,需要的朋友可以參考下2014-10-10