1 - 正則表達式的使用
在 JavaScript 中橄教，正則表達式是寫在/和/之間的，不需要加引號尺铣，可以通過兩種方式創(chuàng)建一個正則表達式装处。
方式一：通過調(diào)用RegExp對象的構(gòu)造函數(shù)創(chuàng)建
var regexp = new RegExp(/123/);
console.log(regexp);
方式二：利用字面量創(chuàng)建正則表達式
var rg = /123/;
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
2 - 正則表達式中的特殊字符
一個正則表達式可以由簡單的字符構(gòu)成，比如 /abc/登淘，也可以是簡單和特殊字符的組合箫老，比如 /ab*c/ 。其中特殊字符也被稱為元字符黔州，在正則表達式中是具有特殊意義的專用符號耍鬓，如 ^ 阔籽、$ 、+ 等牲蜀。
2.1 邊界符：^(以誰開始) $(以誰結(jié)束)
正則表達式中的邊界符（位置符）用來提示字符所處的位置笆制，主要有兩個字符
| 邊界符 | 說明 |
|---|---|
| ^ | 表示匹配行首的文本（以誰開始） |
| $ | 表示匹配行尾的文本（以誰結(jié)束） |
如果 ^和 $ 在一起，表示必須是精確匹配涣达。
var rg = /abc/;
// /abc/ 只要包含有abc這個字符串返回的都是true
console.log(rg.test('abc')); // true
console.log(rg.test('abcd')); // true
console.log(rg.test('aabcd')); // true
console.log('---------------------------');
var reg = /^abc/; //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開頭在辆，abc結(jié)尾。精確匹配度苔，要求必須是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
2.2 方括號[]：只要匹配其中一個就可以
[] 方括號：表示有一系列字符可供選擇匆篓，只要匹配其中一個就可以了，所有可供選擇的字符都放在方括號內(nèi)寇窑。
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
2.3 ^[…]$：代表多選一
如果加了^[...]$就代表多選一鸦概，只會匹配一個，一般我們會和量詞符{n,m}同時使用甩骏。
var rg1 = /^[abc]$/; // 三選一 只要是a 或者是 b 或者是c 開頭或結(jié)尾窗市，就返回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'));//false
----------------------------------------------------------------------------------
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
-----------------------------------------------------------------------------------
//字符組合
var reg1 = /^[a-zA-Z0-9]$/; // 26個英文字母(大寫和小寫都可以)任何一個字母返回true
2.4 ^[^…]$：取反
//取反 方括號內(nèi)部加上 ^ 表示取反饮笛，只要包含方括號內(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
2.5 量詞符{n,m}：量詞符用來設(shè)定某個模式出現(xiàn)的次數(shù)
| 量詞 | 說明 |
|---|---|
| * | 重復(fù)0次或更多次 |
| + | 重復(fù)1次或更多次 |
| ? | 重復(fù)0次或1次 |
| {n} | 重復(fù)n次 |
| {n,} | 重復(fù)n次或更多次 |
| {n,m} | 重復(fù)n到m次 |
2.6 小括號：表示優(yōu)先級
- 大括號{}：量詞符缎浇，用來設(shè)定某個模式出現(xiàn)的次數(shù)。
- 中括號[]：表示有一系列字符可供選擇赴肚，只要匹配其中一個就可以了素跺，所有可供選擇的字符都放在方括號內(nèi)。
- ^ 和 $ 代表以誰開始誉券，以誰結(jié)束指厌。
- ^[...]$ 代表多選一。
- 小括號：表示優(yōu)先級
var reg = /^abc{3}$/; // 它只是讓c重復(fù)三次 精準匹配：abccc
console.log(reg.test('abc')); //false
console.log(reg.test('abcabcabc')); //false
console.log(reg.test('abccc')); //true
// 小括號 表示優(yōu)先級
var reg = /^(abc){3}$/; // 它是讓abc重復(fù)三次 精準匹配：abcabcabc
console.log(reg.test('abc')); //false
console.log(reg.test('abcabcabc')); //true
console.log(reg.test('abccc')); //false
3 - 正則預(yù)定義模式
預(yù)定義類指的是某些常見模式的簡寫方式踊跟。
4 - 正則表達式案例
4.1 用戶名表單驗證
功能需求:
- 如果用戶名輸入合法, 則后面提示信息為: 用戶名合法,并且顏色為綠色
- 如果用戶名輸入不合法, 則后面提示信息為: 用戶名不符合規(guī)范, 并且顏色為紅色
分析:
- 用戶名只能為英文字母,數(shù)字,下劃線或者短橫線組成, 并且用戶名長度為6~16位.
- 首先準備好這種正則表達式模式
/^[a-zA-Z0-9_-]{6,16}$/踩验，用戶只能輸入英文字母 數(shù)字 下劃線 中劃線，并且6-16位 - 當表單失去焦點就開始驗證.
- 如果符合正則規(guī)范, 則讓后面的span標簽添加 right類.
- 如果不符合正則規(guī)范, 則讓后面的span標簽添加 wrong類.
<input type="text" class="uname"> <span>請輸入用戶名</span>
<script>
// 這個模式用戶只能輸入英文字母 數(shù)字 下劃線 中劃線商玫，并且6-16位
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';
span.innerHTML = '用戶名格式輸入不正確';
}
}
</script>
4.2 驗證座機號碼
//正則表達式里面的或者符號用 |
var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/; // | 是或者的意思箕憾，可簡寫成如下：
var reg = /^\d{3,4}-\d{7,8}$/; // 010-12345678 0100-1234567
4.3 表單驗證
//手機號驗證: /^1[3|4|5|7|8][0-9]{9}$/;
//QQ號驗證: /^[1-9]\d{4,}$/; 1-9開頭，至少四位（騰訊qq號從10000開始）
//昵稱驗證: /^[\u4e00-\u9fa5]{2,8}$/
//密碼驗證: /^[a-zA-Z0-9_-]{6,16}$/
//驗證通過與不通過更換元素的類名與元素中的內(nèi)容,將上一步的匹配代碼進行封裝,多次調(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> 格式不正確,請從新輸入 ';
}
}
};
5 - 字符串的replace()方法
字符串的replace() 方法可以實現(xiàn)替換字符串操作拳昌，被替換的可以是一個字符串或是一個正則表達式袭异。
正則表達式的格式為：/ pattern /[switch]，例如：/激情|gay/g
- pattern就是被替換的字符串
- [switch]有三個常用值：g：代表全局匹配炬藤，i：代表忽略大小寫御铃，gi：代表全局匹配+忽略大小寫
- [switch]為空的話只匹配第一個符合表達式的值
var str = 'andy和red';
var newStr = str.replace('andy', 'baby');
console.log(newStr) //baby和red
//等同于 此處的andy可以寫在正則表達式內(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/g,'哈哈')
console.log(nStr) //哈哈bc哈哈bc
//全局匹配+忽略大小寫：gi
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>
