正則表達式
匹配字符串中字符組合的模式
^\w+([-+.]\w+)*@\w+([-+])
正則測試工具
https://tool.oschina.net/regex
1 正則表達式的使用
1.1 定義
// RegExp
var regexp = new RegExp(/456/);
console.log(regexp); // /456/
// 直接量
var regexp2 = /abc/;
1.2 正則表達式對象方法 test()
正則表達式對象方法 test()，檢測某字符串是不是符合規則
// 返回值true表示有符合規則的字符組合
console.log(regexp2.test('abcfg')); //true
console.log(regexp2.test('bacfg')); //false
console.log(regexp.test(456)); //true
console.log(regexp.test('456')); //true
2 正則表達式的特殊字符
2.1 邊界符
^ 匹配行首的文本 以誰開頭
$ 匹配行尾的文本 以誰結束
var reg = /asd/; // 只要包含asd這個字符串就返回true
console.log(reg.test('asdgfd'));//true
var reg2 = /^asd/;
console.log(reg2.test('asdgfd')); //true
console.log(reg2.test('gasdfd')); //false
var reg3 = /^asd$/; //精確匹配
console.log(reg3.test('asdgfd')); //false
console.log(reg3.test('gasdfd')); //false
console.log(reg3.test('asd')); //true
console.log(reg3.test('asdasd')); //false
var reg4 = /asd$/; //以asd結尾
console.log(reg4.test('asdasd')); //true
2.2 字符類
[] 表示有一系列字符可以選擇，只需要匹配一個就可以 。
var rg = /[xyz]/; // 字符串有xyz三個其中一個字符
console.log(rg.test('abcd')); // false
console.log(rg.test('abxcd')); // true
console.log(rg.test('abycd')); // true
console.log(rg.test('xabcdz')); // true
var rg2 = /^[xyz]$/; // 只能是x或者y或者z
console.log(rg2.test('xx')); // false
console.log(rg2.test('x')); // true
console.log(rg2.test('xy')); // false
console.log(rg2.test('z')); // true
var rg3 = /^[0-9a-z]$/; // - 範圍
console.log(rg3.test(3)); //true
console.log(rg3.test('a3')); // false
// 中括號的^表示取反
var rg4 = /^[^0-9a-z]$/;
console.log(rg4.test('5')); // false
console.log(rg4.test('a')); // false
console.log(rg4.test('A')); //true
2.3 量詞類
*
+
？
{n}
{n,}
{n,m}
var rg = /^c*$/; // *表示可以出現0次或多次 >=0 相當於 {0,}
console.log(rg.test('')); //true
console.log(rg.test('c')); //true
console.log(rg.test('cc')); //true
console.log(rg.test('adfg')); //false
var rg = /^c+$/; // +表示可以出現1次或多次 >=1 相當於{1,}
console.log(rg.test('')); // false
console.log(rg.test('c')); // true
console.log(rg.test('cc')); // true
console.log(rg.test('adfg')); //false
var rg = /^c?$/; // ?表示可以出現1次或0次 0 || 1 相當於{0,1}
console.log(rg.test('')); // true
console.log(rg.test('c')); // true
console.log(rg.test('cc')); // false
console.log(rg.test('adfg')); //false
var rg = /^c{3}$/; // 重複3次
console.log(rg.test('')); // false
console.log(rg.test('c')); // false
console.log(rg.test('cc')); // false
console.log(rg.test('ccc')); // true
var rg = /^c{3,}$/; // 至少3次
console.log(rg.test('')); // false
console.log(rg.test('c')); // false
console.log(rg.test('cc')); // false
console.log(rg.test('ccccc')); // true
var rg = /^c{3,5}$/; // 至少3次,最多6次
console.log(rg.test('')); // false
console.log(rg.test('c')); // false
console.log(rg.test('ccc')); // true
console.log(rg.test('cccccc')); // false
var rg = /^[a-zA-Z0-9_-]{6,16}$/;
console.log(rg.test('aa')); // false
console.log(rg.test('a123445')); // true
2.4 其他混合使用
var rg = /^[xyz]$/; // 只能是x或y或z
var rg2 = /^xyz{3}$/;
console.log(rg2.test('xyzxyzxyz')); //false
console.log(rg2.test('xyzzzz')); //true
var rg3 = /^(xyz){3}$/;
console.log(rg3.test('xyzxyzxyz')); //true
console.log(rg3.test('xyzxyzxyzxyz')); //false
實例：
檢測用戶名輸入是否合法，合法提示用戶名合法字顏色顯示綠色；不合法，提示用戶名不合法，顏色是紅色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.right {
color: green;
}
.wrong {
color: red;
}
</style>
</head>
<body>
<input type="text" id="uname" name="" id=""><span id='tip'></span>
<script>
var rg = /^[a-zA-Z0-9_-]{6,16}$/;
var uname = document.querySelector('#uname');
var tip = document.querySelector('#tip');
uname.onblur = function() {
if (rg.test(this.value)) {
tip.className = 'right';
tip.innerHTML = '用戶名合法';
} else {
tip.className = 'wrong';
tip.innerHTML = '用戶名不合法';
}
}
</script>
</body>
</html>
2.5 預定義類
\d === [0-9]
\D === [^0-9]
\w === [a-zA-Z0-9_]
\W === [^a-zA-Z0-9_]
\s === [\t\r\n\v\f] 匹配空格
\S === [^\t\r\n\v\f] 匹配非空格字符
3 正則表達式替換
replace() stringObj.replace(substr/rg,replacement)
var str = 'hello world';
//var newStr = str.replace('hello','hi');
var newStr = str.replace(/hello/, 'hi');
console.log(str); //hello world 原數組不變，產生新的數組
console.log(newStr); //hi world
實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<textarea name="" id="msg" cols="30" rows="10"></textarea>
<button>提交</button>
<script>
var btn = document.querySelector('button');
var tarea = document.querySelector('textarea');
btn.onclick = function() {
// g全局匹配 i忽略大小寫 gi 默認只會匹配一個
tarea.value = tarea.value.replace(/激情|gay/gi, '**')
}
</script>
</body>
</html>