js---正則表示式（一）
阿新 • • 發佈：2021-02-18
1.建立正則表示式：
//1.通過呼叫RegExp物件的建構函式
var regexp = new RegExp(/123/);
console.log(regexp);
//2.利用字面量
var rg = /123/;
// rg.test() 檢測字串是否符合該規則
console.log(rg.test(123)); //true
console.log(rg.test('abc')); //false
2.邊界符
| 邊界符 | 說明 |
|---|---|
| ^ | 匹配行首的文字 |
| $ | 匹配行尾的文字 |
ps: 如果 ^和 $ 在一起，表示必須是精確匹配。
var rg = /abc/; // 正則表示式裡面不需要加引號 不管是數字型還是字串型 3.字元類
（1）[]
表示有一系列字元可供選擇，只要匹配其中一個。
var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回為true （2）量詞符
用來設定某個模式出現的次數。
| 量詞 | 說明 |
|---|---|
| * | 重複0次或更多次 |
| + | 重複1次或更多次 |
| ？ | 重複0次或1次 |
| {n} | 重複n次 |
| {n,} | 重複n次或更多次 |
| {n,m} | 重複n到m次 |
// 1. * 相當於 >= 0 可以出現0次或者很多次
var reg = /^a*$/;
console.log(reg.test('')); //true
console.log(reg.test('a')); //true
console.log(reg.test('aa')); //true
console.log(reg.test('aaaaaa')); //true
console.log('-------1end-------');
// 2. + 相當於 >= 1 可以出現1次或者很多次
var reg2 = /^a+$/;
console.log(reg2.test('')); //false
console.log(reg2.test('a')); //true
console.log(reg2.test('aa')); //true
console.log(reg2.test('aaaaaa')); //true
console.log('-------2end-------');
// 3. ? 相當於 1 || 0
var reg3 = /^a?$/;
console.log(reg3.test('')); //true
console.log(reg3.test('a')); //true
console.log(reg3.test('aa')); //false
console.log(reg3.test('aaaaaa')); //false
console.log('-------3end-------');
// 4. {3} 就是重複3次
var reg4 = /^a{3}$/;
console.log(reg4.test('')); //false
console.log(reg4.test('a')); //false
console.log(reg4.test('aa')); //false
console.log(reg4.test('aaaaaa')); //false
console.log(reg4.test('aaa')); //true
console.log('-------4end-------');
// 5. {3,} >=3
var reg5 = /^a{3,}$/;
console.log(reg5.test('')); //false
console.log(reg5.test('a')); //false
console.log(reg5.test('aa')); //false
console.log(reg5.test('aaaaaa')); //true
console.log(reg5.test('aaa')); //true
console.log('-------5end-------');
// 6. {3, 16} 大於等於3 並且 小於等於16
var reg6 = /^a{3,16}$/;
console.log(reg6.test('')); //false
console.log(reg6.test('a')); //false
console.log(reg6.test('aa')); //false
console.log(reg6.test('aaaaaa')); //true
console.log(reg6.test('aaa')); //true
console.log('-------6end-------');
Demo:簡單的使用者名稱驗證
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
color: #aaa;
font-size: 10px;
}
.right {
color: green;
}
.wrong {
color: red;
}
</style>
</head>
<body>
使用者名稱：<input type="text" id="uname"><span id="tip"></span>
<script>
var ipt = document.querySelector('#uname');
var tip = document.querySelector('#tip');
//由a-z或A-Z或0-9或_或-組成的6~16位字元
var reg = /^[a-zA-Z0-9_-]{6,16}$/;
ipt.onblur = function() {
if (reg.test(this.value)) {
tip.className = 'right';
tip.innerHTML = '輸入格式正確！';
} else {
tip.className = 'wrong';
tip.innerHTML = '輸入格式錯誤！';
}
}
</script>
</body>
</html>
總結：
- {} 量詞符，表示重複次數
- [] 多選一
- () 表示優先順序
var reg1 = /^abc{3}$/; // 它只是讓c重複三次 abccc
console.log(reg1.test('abc')); //false
console.log(reg1.test('abcabcabc')); //false
console.log(reg1.test('abccc')); //true
// 小括號 表示優先順序
var reg2 = /^(abc){3}$/; // 它是讓abc重複三次 abcabcabc
console.log(reg2.test('abc')); //false
console.log(reg2.test('abcabcabc')); //true
console.log(reg2.test('abccc')); //false