詳解JavaScript高階正則表示式
目錄
- 高階正則表示式
- 1.正則表示式概述
- 1.2 正則表示式的特點
- 2.正則表示式在中的使用
- 2.1正則表示式的建立
- 2.2測試正則表示式
- 3.正則表示式中的特殊字元
- 3.1正則表示式的組成
- 3.2邊界符
- 3.3字元類
- 3.4預定義類
- 3.5正則替換replace
- 4.面試題
- 一、如何讓事件先冒泡後捕獲
- 二、說一下事件代理
- （1）瞭解事件代理嗎，這樣做有什麼好處
- （2）事件委託以及冒泡原理:
- （3）事件代理在捕獲階段的實際應用：
- 總結
Script高階正則表示式
1.正則表示式概述
1.1什麼是正則表示式
正則表示式（ Regular Expression ）是用於匹配字串中字元組合的模式。在JavaScript中，正則表示式也是物件。
正則表通常被用來檢索、替換那些符合某個模式（規則）的文字，例如驗證表單：使用者名錶單隻能輸入英文字母、數字或者下劃線， 暱稱輸入框中可以輸入中文(匹配)。此外，正則表示式還常用於過濾掉頁面內容中的一些敏感詞(替換)，或從字串中獲取我們想要的特定部分(提取)等 。
其他語言也會使用正則表示式，本階段我們主要是利用JavaScript 正則表示式完成表單驗證。
1.2 正則表示式的特點
靈活性、邏輯性和功能性非常的強。
可以迅速地用極簡單的方式達到字串的複雜控制。
對於剛接觸的人來說，比較晦澀難懂。比如：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
實際開發,一般都是直接複製寫好的正則表示式. 但是要求會使用正則表示式並且根據實際情況修改正則表示式. 比如使用者名稱:/^[a-z0-9_-]{3,16}$/
2.正則表示式在js中的使用
2.1正則表示式的建立
在 JavaScript 中，可以通過兩種方式建立一個正則表示式。
方式一：通過呼叫RegExp物件的建構函式建立
var regexp = new RegExp(/123/);console.log(regexp);
方式二：利用字面量建立 正則表示式
var rg = /123/;
2.2測試正則表示式
test() 正則物件方法，用於檢測字串是否符合該規則，該物件會返回 true 或 false，其引數是測試字串。
var rg = /123/;
console.log(rg.test(123));//匹配字元中是否出現123 出現結果為true
console.log(rg.test('abc'));//匹配字元中是否出現123 未出現結果為false
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-gN4RwCa1-1640762098190)(images/img4.png)]
3.正則表示式中的特殊字元
3.1正則表示式的組成
一個正則表示式可以由簡單的字元構成，比如 /abc/，也可以是簡單和特殊字元的組合，比如 /ab*c/ 。其中特殊字元也被稱為元字元，在正則表示式中是具有特殊意義的專用符號，如 ^ 、$ 、+ 等。
3.2邊界符
| 邊界符 | 說明 |
|---|---|
| ^ | 表示匹配行首的文字（以誰開始） |
| $ | 表示匹配行尾的文字（以誰結束） |
如果 ^和 $ 在一起，表示必須是精確匹配。
var rg = /abc/; // 正則表示式裡面不需要加引號 不管是數字型還是字串型
// /abc/ 只要包含有abc這個字串返回的都是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 reUKMwBrkpBog1 = /^abc$/; // 精確匹配 要求必須是 abc字串才符合規範
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字元類
字元類表示有一系列字元可供選擇，只要匹配其中一個就可以了。所有可供選擇的字元都放在方括號內。
3.3.1 [] 方括號
表示有一系列字元可供選擇，只UKMwBrkpBo要匹配其中一個就可以了
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 這三個字母才返回 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個英文字母任何一個字母返回 true - 表示的是a 到z 的範圍
console.log(reg.test('a'));//true
console.log(reg.test('z'));//true
console.log(reg.test('A'));//false
---------------------------------------------------www.cppcns.com--------------------------------
//字元組合
var reg1 = /^[a-zA-Z0-9]$/; // 26個英文字母(大寫和小寫都可以)任何一個字母返回 true
------------------------------------------------------------------------------------
//取反 方括號內部加上 ^ 表示取反，只要包含方括號內的字元，都返回 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量詞符
量詞符用來設定某個模式出現的次數。
| 量詞 | 說明 |
|---|---|
| * | 重複0次或更多次 |
| + | 重複1次或更多次 |
| ? | 重複0次或1次 |
| {n} | 重複n次 |
| {n,} | 重複n次或更多次 |
| {n,m} | 重複n到m次 |
3.3.3使用者名錶單驗證
功能需求:
1.如果使用者名稱輸入合法,則後面提示資訊為: 使用者名稱合法,並且顏色為綠色
2如果使用者名稱輸入不合法,則後面提示資訊為: 使用者名稱不符合規範,並且顏色為紅色
分析:
- 使用者名稱只能為英文字母,數字,下劃線或者短橫線組成,並且使用者名稱長度為6~16位.
- 首先準備好這種正則表示式模式/$[a-zA-Z0-9-_]{6,16}^/
- 當表單失去焦點就開始驗證.
- 如果符合正則規範,則讓後面的span標籤新增 right類.
- 如果不符合正則規範,則讓後面的span標籤新增 wrong類.
<input type="text" class="uname"> <span>請輸入使用者名稱</span>
<script>
// 量詞是設定某個模式出現的次數
var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 這個模式使用者只能輸入英文字母 數字 下劃線 中劃線
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('錯誤的');
span.className = 'wrong';
UKMwBrkpBo span.innerHTML = '使用者名稱格式輸入不正確';
}
}
</script>
3.3.4 括號總結
1.大括號 量詞符. 裡面表示重複次數
2.中括號 字元集合。匹配方括號中的任意字元.
3.小括號表示優先順序
3.4預定義類
預定義類指的是某些常見模式的簡寫方式.
[外鏈圖片轉存失敗,建議將圖片儲存下來直接上傳(img-cETagwqf-1640762098196)(images/img3.png)]
案例:驗證座機號碼
var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;
var reg = /^\d{3,4}-\d{7,8}$/;
表單驗證案例
//手機號驗證:/^1[3|4|5|7|8][0-9]{9}$/;
//驗證通過與不通過更換元素的類名與元素中的內容
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>格式不正確,請從新輸入 ';
}
//QQ號驗證: /^[1-9]\d{4,}$/;
//暱稱驗證:/^[\u4e00-\u9fa5]{2,8}$/
//驗證通過與不通過更換元素的類名與元素中的內容,將上一步的匹配程式碼進行封裝,多次呼叫即可
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> 格式不正確,請從新輸入 ';
}
}
};
//密碼驗證:/^[a-zA-Z0-9_-]{6,16}$/
//再次輸入密碼只需匹配與上次輸入的密碼值 是否一致
3.5正則替換replace
replace() 方法可以實現替換字串操作，用來替換的引數可以是一個字串或是一個正則表示式。
var str = 'andy和red';
var newStr = str.replace('andy','baby');
console.log(newStr)//baby和red
//等同於 此處的andy可以寫在正則表示式內
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.面試題
一、如何讓事件先冒泡後捕獲
原本的事件流中，是先捕獲再冒泡。
對於目標元素來說，如果DOM節點通過addEventListener同時綁定了兩個事件監聽函式，一個用於捕獲，一個用於冒泡，那麼兩個事件的執行順序是按照程式碼新增的順序執行的。所以，先繫結冒泡的函式，再繫結捕獲的函式，即可實現。
對於非目標元素來說，可以給捕獲事件的處理程式新增一個定時器，將處理程式推入下一個巨集任務執行。
二、說一下事件代理
事件委託是指 不在子節點單獨設定事件監聽器，而將事件監聽器設定在父節點上，再利用冒泡原理使每一個子節點都能觸發該事件。
事件委託的優點：只操作一次Dom，提高了程式的效能。
常用於：ul和li標籤的事件監聽，一般採用事件委託機制將事件監聽器繫結在ul上。
還適合動態元素的繫結，新新增的子元素不需單獨新增事件處理程式。
（1）瞭解事件代理嗎，這樣做有什麼好處
事件代理/事件委託：利用了事件冒泡，只指定一個事件處理程式，就可以管理某一型別的事件，簡而言之：事件代理就是說我們將事件新增到本來要新增的事件的父節點，將事件委託給父節點來觸發處理函式，這通常會使用在大量的同級元素需要新增同一類事件的時候，比如一個動態的非常多的列表，需要為每個列表項都新增點選事件，這時就可以使用事件代理，通過判斷e.target.nodeName來判斷髮生的具體元素，這樣做的好處是減少事件繫結，同事動態的DOM結構任然可以監聽，事件代理髮生在冒泡階段
（2）事件委託以及冒泡原理:
事件委託是利用冒泡階段的執行機制來實現的，就是把一個元素響應事件的函式委託到另一個元素，一般是把一組元素的事件委託到他的父元素上。
委託的優點是減少記憶體消耗，節約效率動態繫結事件
事件冒泡，就是元素自身的事件被觸發後，如果父元素有相同的事件，如onclick事件，那麼元素本身的觸發狀態就會傳遞，也就是冒到父元素，父元素的相同事件也會一級一級根據巢狀關係向外觸發，直到document/window，冒泡過程結束。
（3）事件代理在捕獲階段的實際應用：
可以在父元素層面阻止事件向子元素傳播，也可代替子元素執行某些操作。
總結
本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!