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