深入了解JavaScript中正則表達式的使用
一、什么是正則表達式
是用于匹配字符串中字符組合的模式。在 JavaScript中，正則表達式也是對象。
正則表通常被用來檢索、替換那些符合某個模式（規(guī)則）的文本，例如驗證表單：用戶名表單只能輸入英文字母、數(shù)字或者下劃線， 昵稱輸入框中可以輸入中文(匹配)。此外，正則表達式還常用于過濾掉頁面內(nèi)容中的一些敏感詞(替換)，或從字符串中獲取我們想要的特定部分(提取)等 。
1、正則表達式特點
正則表達式的靈活性。
邏輯性和功能性非常強。
可以迅速地用極簡單的方式達到字符串的復雜控制。
2、正則表達式的使用
1、創(chuàng)建正則表達式
通常有兩種方式可以創(chuàng)建。
1）通過調(diào)用 RegExp 對象的構(gòu)造函數(shù)創(chuàng)建
var 變量名 = new RegExp(/表達式/);
2）通過字面量創(chuàng)建
var 變量名 = /表達式/;
// 注釋中間放表達式就是正則字面量
2、測試正則表達式
test() 正則對象方法，用于檢測字符串是否符合該規(guī)則，該對象會返回 true 或 false，其參數(shù)是測試字符串。
regexObj.test(str)
其中：
regexObj —寫的正則表達式
str —要測試的文本
意即檢測str文本是否符合寫的正則表達式規(guī)范。
例如：
給定一個正則表達式var rg = /123/,判斷我們輸入的字符串是否符合規(guī)則。
var str = '123' var reg1 = new RegExp(/123/); var reg2 = /abc/; console.log(reg1.test(str)) ; console.log(reg2.test(str)) ;
打印結(jié)果為;
二、正則表達式中的特殊字符
1、正則表達式的組成
一個正則表達式可以由簡單的字符構(gòu)成，比如 /abc/，也可以是簡單和特殊字符的組合，比如 /ab*c/ 。其中特殊字符也被稱為元字符，在正則表達式中是具有特殊意義的專用符號，如 ^ 、$ 、+ 等。
2、邊界符
正則表達式中的邊界符（位置符）用來提示字符所處的位置，主要有兩個字符。
| 邊界符 | 說明 |
|---|---|
| ^ | 表示匹配行首的文本 |
| $ | 表示匹配行尾的文本 |
如果 ^ 和 $ 在一起，表示必須是精確匹配。
3、字符類
字符類表示有一系列字符可供選擇，只要匹配其中一個就可以了。所有可供選擇的字符都放在方括號內(nèi)。
1、[]方括號類
/[abc]/.test('andy') // true
后面的字符串只要包含abc中任意一個字符，都返回true。
2、[-]方括號內(nèi)部 范圍符-
/^[a-z]$/.test(c') // true
方括號內(nèi)部加上 - 表示范圍，這里表示 a 到 z 26個英文字母都可以。
3. [^] 方括號內(nèi)部 取反符^
/[^abc]/.test('andy') // false
方括號內(nèi)部加上 ^ 表示取反，只要包含方括號內(nèi)的字符，都返回 false 。
注意和邊界符 ^ 區(qū)別，邊界符寫到方括號外面。
4. 字符組合
/[a-z1-9]/.test('andy') // true
方括號內(nèi)部可以使用字符組合，這里表示包含 a 到 z 的26個英文字母和 1 到 9 的數(shù)字都可以。
4、 量詞符
量詞符用來設定某個模式出現(xiàn)的次數(shù)。
| 量詞 | 說明 |
|---|---|
| * | 重復零次或者更多次 |
| + | 重復一次或者更多次 |
| ？ | 重復0次或一次 |
| {n} | 重復n次 |
| {n,} | 重復n次或更多次 |
| {n,m} | 重復n到m次 |
var reg = /^a*$/; // * 相當于>=0，可以出現(xiàn)0次或很多次
var reg = /^a+$/; // + 相當于>=1，可以出現(xiàn)1次或很多次
var reg = /^a?$/; // ? 相當于1||0，可以出現(xiàn)0次或1次
var reg = /^a{3}$/; // {3}就是重復a字符3次
var reg = /^a{3,}$/; // {3,}就是重復a字符 大于等于3次
var reg = /^a{3,16}$/; // {3,16}就是重復a字符 大于等于3次 小于等于16次
比如現(xiàn)在做一個用戶名驗證的案例，如果用戶名輸入合法，則提示信息為：用戶名合法，顏色為綠色；如果用戶名輸入不合法，則提示信息為：用戶名不合法，并且顏色為綠色。
代碼如下：
<!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>
<script src="jquery.js"></script>
<style>
.success{
color:green;
}
.wrong{
color:red;
}
</style>
</head>
<body>
<label for="">用戶名：
<input type="text" class="uname"><span></span>
</label>
<script>
$(function(){
var reg = /^[a-zA-Z0-9_-]{6,16}$/;
$('.uname').bind('blur',function(){
let str = $(this).val();
if($('input').val === null){
$('span').removeClass();
}
if(reg.test(str)){
if($('span').hasClass('wrong'))
$('span').removeClass()
$('span').html('輸入格式正確');
$('span').addClass('success')
}else{
$('span').html('輸入格式錯誤');
$('span').addClass('wrong')
}
})
})
</script>
</body>
</html>
顯示效果為：
5、括號總結(jié)
大括號 量詞符. 里面表示重復次數(shù)
中括號 字符集合。匹配方括號中的任意字符.
小括號 表示優(yōu)先級
6、預定義類
預定義類指的是某些常見模式的簡寫方式。
三、String類中的方法
1、match()方法
match()方法：根據(jù)正則匹配出所有符合要求的內(nèi)容匹配成功后將其保存到數(shù)組中，匹配失敗則返回false。
例如：
var str = "It's is the shorthand of it is"; var reg1 = /it/gi; str.match(reg1); // 匹配結(jié)果：(2) ["It", "it"] var reg2 = /^it/gi; str.match(reg2); // 匹配結(jié)果：["It"] var reg3 = /s/gi; str.match(reg3); // 匹配結(jié)果：(4) ["s", "s", "s", "s"] var reg4 = /s$/gi; str.match(reg4); // 匹配結(jié)果：["s"]
2、search()方法
search()方法：search()方法可以返回指定模式的子串在字符串首次出現(xiàn)的位置，相對于indexOf()方法來說功能更強大。
例如：
var str = '123*abc.456';
console.log(str.search('.*')); // 輸出結(jié)果：0
console.log(str.search(/[\.\*]/)); // 輸出結(jié)果：3
3、split()方法
split()方法：split()方法用于根據(jù)指定的分隔符將一個字符串分割成字符串數(shù)組，其分割后的字符串數(shù)組中不包括分隔符。
例如：
按照字符串中的“@”和“.”兩種分隔符進行分割。
var str = 'test@123.com'; var reg = /[@\.]/; var split_res = str.split(reg); console.log(split_res); // 輸出結(jié)果：(3) ["test", "123", "com"]
正則匹配方式分割字符串時，還可以指定字符串分割的次數(shù)。
var str = 'We are a family'; var reg = /\s/; var split_res = str.split(reg, 2); console.log(split_res); // 輸出結(jié)果：(2) ["We", "are"]
4、replace()方法
replace()方法：replace()方法用于替換字符串，用來操作的參數(shù)可以是一個字符串或正則表達式。
例如：寫一個查找并替換敏感詞的案例（過濾漢字和‘bad'這個單詞）：
<!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>
</head>
<body style="display:flex">
<div>
<p>過濾前的內(nèi)容</p>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button id = 'btn'>過濾</button>
</div>
<div>
<p>過濾后的內(nèi)容</p>
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
<script>
var text = document.querySelectorAll('textarea');
console.log(text);
var btn = document.querySelector('button');
btn.onclick = function() {
text[1].value = text[0].value.replace(/(bad)|[\u4e00-\u9fa5]/gi, '*');
}
</script>
</body>
</html>
運行效果為：?
以上就是深入了解JavaScript中正則表達式的使用的詳細內(nèi)容，更多關(guān)于JavaScript正則表達式的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Three.js的使用及繪制基礎3D圖形的相關(guān)資料，文中介紹的非常詳細，對大家學習或者使用three.js具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)音樂播放控制條，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
詳解基于DllPlugin和DllReferencePlugin的webpack構(gòu)建優(yōu)化
這篇文章主要介紹了詳解基于DllPlugin和DllReferencePlugin的webpack構(gòu)建優(yōu)化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
在純靜態(tài)網(wǎng)站里，有時候會動態(tài)更新某個區(qū)域往會選擇?Pjax（swup、barba.js）去處理。本文主要和大家分享下Pjax下載動態(tài)加載插件方案，感興趣的可以了解一下2022-09-09
在每年的10月24日,我們都會慶祝程序員節(jié),這是一個向所有辛勤工作、創(chuàng)造出無數(shù)令人驚嘆應用和系統(tǒng)的程序員們致敬的日子,為了紀念這個特殊的日子,我們將通過編寫一個簡單的1024小游戲來向所有程序員們表示敬意,本文將詳細解釋如何使用JavaScript編寫這個小游戲2023-10-10
今天小編就為大家分享一篇解決layui富文本編輯器圖片上傳無法回顯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
本篇文章主要介紹了webpack異步加載業(yè)務模塊 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
做網(wǎng)頁時需要利用JS進行特效展示圖片，下面是利用JS簡單制作的圖片的切換，需要的朋友可以了解下2013-12-12
這篇文章主要介紹了Javascript Promise用法詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)聊天室功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06