1. 正則表達(dá)式概述
1.1 什么是正則表達(dá)式
正則表達(dá)式（
Regular Expression）是用于匹配字符串中字符組合的模式担忧。在JavaScript中枕面，正則表達(dá)式也是對象挠蛉。正則表通常被用來檢索、替換那些符合某個模式（規(guī)則）的文本，例如驗證表單：用戶名表單只能輸入英文字母逮壁、數(shù)字或者下劃線颓遏， 昵稱輸入框中可以輸入中文(匹配)徐矩。此外，正則表達(dá)式還常用于過濾掉頁面內(nèi)容中的一些敏感詞(替換)叁幢，或從字符串中獲取我們想要的特定部分(提取)等 滤灯。
其他語言也會使用正則表達(dá)式，本階段我們主要是利用
JavaScript正則表達(dá)式完成表單驗證曼玩。
1.2 正則表達(dá)式的特點
靈活性鳞骤、邏輯性和功能性非常的強。
可以迅速地用極簡單的方式達(dá)到字符串的復(fù)雜控制黍判。
對于剛接觸的人來說豫尽，比較晦澀難懂。比如：
^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$顷帖。實際開發(fā),一般都是直接復(fù)制寫好的正則表達(dá)式. 但是要求會使用正則表達(dá)式并且根據(jù)實際情況修改正則表達(dá)式. 比如用戶名:
/^[a-z0-9_-]{3,16}$/美旧。
2. 正則表達(dá)式在js中的使用
2.1 正則表達(dá)式的創(chuàng)建
在 JavaScript中，可以通過兩種方式創(chuàng)建一個正則表達(dá)式窟她。
- 方式一：通過調(diào)用
RegExp對象的構(gòu)造函數(shù)創(chuàng)建 陈症。
var regexp = new RegExp(/123/);
console.log(regexp);
- 方式二：利用字面量創(chuàng)建 正則表達(dá)式。
var rg = /123/;
2.2 測試正則表達(dá)式
-
test()正則對象方法震糖，用于檢測字符串是否符合該規(guī)則录肯，該對象會返回true或false，其參數(shù)是測試字符串吊说。
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
3 正則表達(dá)式中的特殊字符
3.1 正則表達(dá)式的組成
- 一個正則表達(dá)式可以由簡單的字符構(gòu)成论咏，比如
/abc/优炬，也可以是簡單和特殊字符的組合，比如/ab*c/厅贪。其中特殊字符也被稱為元字符蠢护，在正則表達(dá)式中是具有特殊意義的專用符號，如^ 养涮、$ 葵硕、+等。
特殊字符非常多贯吓，可以參考： MDN
3.2 邊界符
- 正則表達(dá)式中的邊界符（位置符）用來提示字符所處的位置懈凹，主要有兩個字符。
| 邊界符 | 說明 |
|---|---|
| ^ | 表示匹配行首的文本（以誰開始） |
| $ | 表示匹配行尾的文本（以誰結(jié)束） |
- 如果
^和$在一起悄谐，表示必須是精確匹配介评。
// 正則表達(dá)式不需要使用引號引起來,不管是數(shù)字型還是字符串型
// 邊界符 ^ $
let reg = /abc/; // 正則表達(dá)式里面不需要加引號 不管是數(shù)字型還是字符串型
// /abc/ 表示只要包含 abc字符串的字符串都可以
console.log(reg.test('abc')); // true
console.log(reg.test('abcd')); // true
console.log(reg.test('aabcd')); // true
let rg = /^abc$/;
console.log(rg.test('abc')); // true
console.log(rg.test('abcd')); // false
console.log(rg.test('aabcd')); // false
console.log(rg.test('abcabc')); // false
3.3 字符類
- 字符類表示有一系列字符可供選擇，只要匹配其中一個就可以了爬舰。所有可供選擇的字符都放在方括號內(nèi)们陆。
[ ] 方括號
- 表示有一系列字符可供選擇，只要匹配其中一個就可以了:
// 字符類：[] 表示有一系列的字符是可以選擇的情屹，只要匹配其中一個就可以了
let rg = /[abc]/;// 只要包含有a或者b包含有c都會返回true 不管是在任何位置
console.log(rg.test('abc')); // true
console.log(rg.test('block')); // true
console.log(rg.test('color')); // true
console.log(rg.test('double')); // true
console.log(rg.test('free')); // false
let reg = /^[abc]$/; // 三選一 只有是 a 或者 b 或者 c 這三個字母中其中一個才會返回 true
console.log(reg.test('a')); // true
console.log(reg.test('b'));// true
console.log(reg.test('c')); // true
console.log(reg.test('d'));// false
// 特殊字符 - 連接符
let r = /^[a-z]$/; // 26個英文字母中的其中一個
console.log(r.test('a')); // true
console.log(r.test('r')); // true
console.log(r.test('1')); // false
// 26個英文字母的大寫和小寫
let reg = /^[a-zA-Z_-]$/;
console.log(reg.test('a')); // true
console.log(reg.test('B')); // true
console.log(reg.test('6')); // false
console.log(reg.test('-')); // true
console.log(reg.test('_')); // true
// 如果中括號里面有 ^ 表示取反的意思
let rg = /^[^a-zA-Z_-]$/; // 小括號里面的 ^ 代表取反的意思
console.log(rg.test('a')); // false
console.log(rg.test('B')); // false
console.log(rg.test('6')); // true
console.log(rg.test('-')); // false
console.log(rg.test('_')); // false
量詞符
- 量詞符用來設(shè)定某個模式出現(xiàn)的次數(shù)坪仇。
| 量詞 | 說明 |
|---|---|
* |
重復(fù)0次或更多次 |
+ |
重復(fù)1次或更多次 |
? |
重復(fù)0次或1次 |
{n} |
重復(fù)n次 |
{n,} |
重復(fù)n次或更多次 |
{n,m} |
重復(fù)n到m次 |
// 量詞符 ：用來設(shè)定某個模式出現(xiàn)次數(shù)
// 簡單理解 ：就是讓下面的a這個字符重復(fù)多少次
// * 相當(dāng)于 >= 0 可以出現(xiàn)0次或者很多次
let reg = /^a*$/;
// console.log(reg.test('a'));// true
// console.log(reg.test('')); // true
// console.log(reg.test('aaaaaaaaaaa')); // true
// console.log(reg.test('b')); // false
// console.log(reg.test('bbbbbb')); // false
// + 相當(dāng)于 >= 1可以 出現(xiàn)1次或者1次以上
let rg = /^a+$/;
// console.log(rg.test('a')); // true
// console.log(rg.test('')); // false
// console.log(rg.test('bbb')); // false
// console.log(rg.test('aaaaaaaaa')); // true
// ? 相當(dāng)于 1 || 0 出現(xiàn) 0 次 或者是 1 次
let r = /^a?$/;
// console.log(r.test('a')); // true
// console.log(r.test('')); // true
// console.log(r.test('aaaa')); // false
// {} 剛好3次
let rr = /^a{3}$/;
// console.log(rr.test('aaaa')); // false
// console.log(rr.test('aaa')); // true
// console.log(rr.test('aa')); // false
// 大于等于 3次
let rrr = /^a{3,}$/;
// console.log(rrr.test('aaaa')); // true
// console.log(rrr.test('aaa')); // true
// console.log(rrr.test('aa')); // false
// 大于等于 3次 小于等于 6 次
let rrrr = /^a{3,6}$/;
console.log(rrrr.test('aaaaaaaa')); // false
console.log(rrrr.test('aaaaaa')); // true
console.log(rrrr.test('aa')); // false
console.log(rrrr.test('aaa')); // true
- 量詞符設(shè)定某個模式出現(xiàn)的次數(shù)。
// 量詞設(shè)定某個模式出現(xiàn)的次數(shù)
let reg = /^[a-zA-Z0-9_-]$/; // 這個模式用戶只能輸入英文字母數(shù)字下劃線短橫線但是有邊界符和 [] 這就限定了只能多選 1
// console.log(reg.test('a')); // true
// console.log(reg.test('aaa')); // false
// console.log(reg.test('8')); // true
// console.log(reg.test('888')); // false
// {6,16} 量詞中間不能有空格
let rg = /^[a-zA-Z0-9_-]{3,16}$/; // 注意 {6,16} 量詞中間不能有空格
console.log(rg.test('andy_red')); // true
console.log(rg.test('andy_color')); // true
console.log(rg.test('andy_blue')); // true
console.log(rg.test('andy_b3666')); // true
console.log(rg.test('andy_b--66')); // true
console.log(rg.test('andy_b--66**')); // false
案例用戶名表單驗證
功能需求:
如果用戶名輸入合法, 則后面提示信息為: 用戶名合法,并且顏色為綠色屁商；
如果用戶名輸入不合法, 則后面提示信息為: 用戶名不符合規(guī)范, 并且顏色為紅色烟很；
用戶名合法
用戶名不合法
分析:
用戶名只能為英文字母,數(shù)字,下劃線或者短橫線組成, 并且用戶名長度為
6~16位。首先準(zhǔn)備好這種正則表達(dá)式模式
/$[a-zA-Z0-9-_]{6,16}^/蜡镶。當(dāng)表單失去焦點就開始驗證.雾袱。
如果符合正則規(guī)范, 則讓后面的
span標(biāo)簽添加right類。如果不符合正則規(guī)范, 則讓后面的
span標(biāo)簽添加wrong類官还。
代碼實現(xiàn)
- CSS芹橡。
.right {
color: #00ff00;
}
.wrong {
color: #f00;
}
- html
<input type="text" class="uname"><span>請輸入用戶名</span>
- javascript
let input = document.querySelector('.uname');
let span = document.querySelector('span');
let reg = /^[a-zA-Z0-9_-]{3,16}$/; // 用戶名驗證正則表達(dá)式
/**
* 當(dāng)鼠標(biāo)失去焦點的時候
*/
input.addEventListener('blur', () => {
// 獲取到輸入框中的值
let iptVal = input.value;
if (reg.test(iptVal)) {
span.innerHTML = '用戶名格式正確!';
span.className = 'right';
} else {
span.innerHTML = '用戶名格式不正確!';
span.className = 'wrong';
}
});
括號總結(jié)
大括號 量詞符. 里面表示重復(fù)次數(shù);
中括號 字符集合。匹配方括號中的任意字符;
小括號表示優(yōu)先級望伦。
3.4 預(yù)定義類
- 預(yù)定義類指的是某些常見模式的簡寫方式林说。
預(yù)定義類
案例:驗證座機號碼
// 正則表達(dá)式里面的或者符號是 | 一個豎線
let rg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;
3.5 表單驗證案例
- 手機號驗證：
//手機號驗證:/^1[3|4|5|7|8][0-9]{9}$/;
//驗證通過與不通過更換元素的類名與元素中的內(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>格式不正確,請從新輸入 ';
}
- QQ號驗證：
//QQ號驗證: /^[1-9]\d{4,}$/;
//昵稱驗證:/^[\u4e00-\u9fa5]{2,8}$/
//驗證通過與不通過更換元素的類名與元素中的內(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> 格式不正確,請從新輸入 ';
}
}
};
//密碼驗證:/^[a-zA-Z0-9_-]{6,16}$/
//再次輸入密碼只需匹配與上次輸入的密碼值 是否一致
3.6 正則替換replace
-
replace()方法可以實現(xiàn)替換字符串操作，用來替換的參數(shù)可以是一個字符串或是一個正則表達(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>
