您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“JavaScript正則表達(dá)式怎么用”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JavaScript正則表達(dá)式怎么用”這篇文章吧。
正則表達(dá)式(Regular Expression,簡(jiǎn)稱regexp)
是一種描述字符串結(jié)構(gòu)的語(yǔ)法規(guī)則。
是一個(gè)特定的格式化模式,用于驗(yàn)證各種字符串是否匹配這個(gè)特征,進(jìn)而實(shí)現(xiàn)高級(jí)的文本查找、替換、截取內(nèi)容等操作。
應(yīng)用:在項(xiàng)目開發(fā)中,手機(jī)號(hào)碼指定位數(shù)的隱藏、數(shù)據(jù)采集、敏感詞的過(guò)濾以及表單的驗(yàn)證等功能,都可以利用正則表達(dá)式來(lái)實(shí)現(xiàn)。
適用領(lǐng)域:在操作系統(tǒng)(Unix、Linux等)、編程語(yǔ)言(C、C++、Java、PHP、Python、JavaScript等)。
舉例:以文本查找為例,若在大量的文本中找出符合某個(gè)特征的字符串(如手機(jī)號(hào)碼),就將這個(gè)特征按照正則表達(dá)式的語(yǔ)法寫出來(lái),形成一個(gè)計(jì)算機(jī)程序識(shí)別的模式(Pattern),然后計(jì)算機(jī)程序就會(huì)根據(jù)這個(gè)模式到文本中進(jìn)行匹配,找出符合規(guī)則的字符串。
正則表達(dá)式的發(fā)展史
正則表達(dá)式的表現(xiàn)形式
一種是POSIX規(guī)范兼容的正則表達(dá)式,用于確保操作系統(tǒng)之間的可移植性。
一種是當(dāng)Perl(一種功能豐富的編程語(yǔ)言)發(fā)展起來(lái)后,衍生出來(lái)了Perl正則表達(dá)式,JavaScript中的正則語(yǔ)法就是基于Perl的。
在開發(fā)中,經(jīng)常需要根據(jù)正則匹配模式完成對(duì)指定字符串的搜索和匹配。
exec()方法用于在目標(biāo)字符串中搜索匹配,一次僅返回一個(gè)匹配結(jié)果。
例如,在指定字符串str中搜索abc。
“/abc/i”中的“/”是正則表達(dá)式的定界符,“abc”表示正則表達(dá)式的模式文本,“i”是模式修飾標(biāo)識(shí)符,表示在str中忽略大小寫。
exec()方法的參數(shù)是待匹配的字符串str,匹配成功時(shí),該方法的返回值是一個(gè)數(shù)組,否則返回null。
從exec()的返回結(jié)果中可以看出,該數(shù)組保存的第1個(gè)元素(AbC)表示匹配到的字符串;第2個(gè)元素index表示匹配到的字符位于目標(biāo)字符串中的索引值(從0開始計(jì)算);第3個(gè)參數(shù)input表示目標(biāo)字符串(AbC123abc456)。
String對(duì)象中的match()方法除了可在字符串內(nèi)檢索指定的值外,還可以在目標(biāo)字符串中根據(jù)正則匹配出所有符合要求的內(nèi)容,匹配成功后將其保存到數(shù)組中,匹配失敗則返回false。
定位符“^”,可用于匹配字符串開始的位置。
定位符“$”,可用于匹配字符串結(jié)尾的位置。
g表示全局匹配,用于在找到第一個(gè)匹配之后仍然繼續(xù)查找。
在JavaScript應(yīng)用中,使用正則表達(dá)式之前首先需要?jiǎng)?chuàng)建正則對(duì)象。除了前面講解過(guò)的字面量方式創(chuàng)建外,還可以通過(guò)RegExp對(duì)象的構(gòu)造函數(shù)的方式創(chuàng)建。
pattern是由元字符和文本字符組成的正則表達(dá)式模式文本。
元字符是具有特殊含義的字符,如“^”、“.”或“*”等。
文本字符就是普通的文本,如字母和數(shù)字等。
flags表示模式修飾標(biāo)識(shí)符,用于進(jìn)一步對(duì)正則表達(dá)式進(jìn)行設(shè)置。
模式修飾符,還可以根據(jù)實(shí)際需求多個(gè)組合在一起使用。
例如,既要忽視大小寫又要進(jìn)行全局匹配,則可以直接使用gi,并且在編寫多個(gè)模式修飾符時(shí)沒(méi)有順序要求。
因此,模式修飾符的合理使用,可使正則表達(dá)式變得更加簡(jiǎn)潔、直觀。
為了讓讀者更好的理解正則對(duì)象的獲取,以匹配特殊字符“^”、“$”、“*”、“.”和“\”為例進(jìn)行對(duì)比講解。
選擇符“|”表示“或”,查找條件只要其中一個(gè)條件滿足即可成立。
JavaScript中字符串存在轉(zhuǎn)義問(wèn)題,因此代碼中str里的“\”表示反斜線“\”。
在正則中匹配特殊字符時(shí),也需要反斜線(\)對(duì)特殊字符進(jìn)行轉(zhuǎn)義。例如,“\\”經(jīng)過(guò)字符串轉(zhuǎn)義后變成“\”,然后正則表達(dá)式再用“\”去匹配“\”。
注意
構(gòu)造函數(shù)方式與字面量方式創(chuàng)建的正則對(duì)象,雖然在功能上完全一致,但它們?cè)谡Z(yǔ)法實(shí)現(xiàn)上有一定的區(qū)別,前者的pattern在使用時(shí)需要對(duì)反斜杠(\)進(jìn)行轉(zhuǎn)義。而后者的pattern在編寫時(shí),要放在定界符“/”內(nèi),flags標(biāo)記則放在結(jié)尾定界符之外
好處:有效的使用字符類別可以使正則表達(dá)式更加簡(jiǎn)潔,便于閱讀。
舉例1:大寫字母、小寫字母和數(shù)字可以使用“\w”直接表示。
案例2:若要匹配0到9之間的數(shù)字可以使用“\d”表示。
下面為了方便讀者理解字符類別的使用,以“.”和“\s”為例進(jìn)行演示.
正則對(duì)象reg用于匹配空白符后的任意兩個(gè)字符(除換行外)。
因此在控制臺(tái)查看到的結(jié)果中,id前有一個(gè)空格。
字符集合的表示方式:“[]”可以實(shí)現(xiàn)一個(gè)字符集合。
字符范圍:與連字符“-”一起使用時(shí),表示匹配指定范圍內(nèi)的字符。
反義字符:元字符“^”與“[]”一起使用時(shí),稱為反義字符。
不在某范圍內(nèi): “^”與“[]”一起使用,表示匹配不在指定字符范圍內(nèi)的字符。
以字符串 ‘get好TB6’.match(/pattern/g) 為例演示其常見的用法。
注意
字符“-”在通常情況下只表示一個(gè)普通字符,只有在表示字符范圍時(shí)才
作為元字符來(lái)使用?!?”連字符表示的范圍遵循字符編碼的順序,如“a-Z”、“z-a”、“a-9”都是不合法的范圍。
【案例】限定輸入內(nèi)容
代碼實(shí)現(xiàn)思路:
編寫HTML,設(shè)置一個(gè)年(份)和月(份)的文本框,以及一個(gè)查詢按鈕。
獲取操作的元素對(duì)象,對(duì)表單的提交進(jìn)行驗(yàn)證。
驗(yàn)證年份, 正則:/^\d{4}/ 。 驗(yàn) 證 月 份 , 正 則 : / ( ( 0 ? [ 1 ? 9 ] ) ∣ ( 1 [ 012 ] ) ) /。
文本框獲取焦點(diǎn),去除提示框的顏色。文本框失去焦點(diǎn),去除輸入內(nèi)容的兩端的空白,并進(jìn)行驗(yàn)證。
代碼實(shí)現(xiàn)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>限定輸入內(nèi)容</title> <style> input[type=text]{width: 40px;border-color: #bbb;height: 25px;font-size: 14px;border-radius: 2px;outline: 0;border: #ccc 1px solid;padding: 0 10px;-webkit-transition: box-shadow .5s;margin-bottom: 15px;} input[type=text]:hover, input[type=text]:focus,input[type=submit]:hover{border: 1px solid #56b4ef; box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6); -webkit-transition: box-shadow .5s;} input::-webkit-input-placeholder {color: #999; -webkit-transition: color .5s;} input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {color: #c2c2c2; -webkit-transition: color .5s;} input[type=submit]{height: 30px; width: 80px; background: #4393C9; border:1px solid #fff;color: #fff;font:14px bolder; } </style> </head> <body> <form id="form"> 年份 <input type="text" name="year"> 月份 <input type="text" name="month"> <input type="submit" value="查詢"> </form> <p id="result"></p> <script> function checkYear(obj) { if (!obj.value.match(/^\d{4}$/)) { obj.style.borderColor = 'red'; result.innerHTML = '輸入錯(cuò)誤,年份為4位數(shù)字表示'; return false; } result.innerHTML = ''; return true; } function checkMonth(obj) { if (!obj.value.match(/^((0?[1-9])|(1[012]))$/)) { obj.style.borderColor = 'red'; result.innerHTML = '輸入錯(cuò)誤,月份為1~12之間'; return false; } result.innerHTML = ''; return true; } var form = document.getElementById('form'); // <form>元素對(duì)象 var result = document.getElementById('result'); // <p>元素對(duì)象 var inputs = document.getElementsByTagName('input'); // <input>元素集合 form.onsubmit = function() { return checkYear(inputs.year) && checkMonth(inputs.month); }; inputs.year.onfocus = function() { this.style.borderColor = ''; }; inputs.month.onfocus = function() { this.style.borderColor = ''; }; if (!String.prototype.trim) { String.prototype.trim = function() { return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); // \uFEFF字節(jié)順序標(biāo)記;\xA0不換行空白 }; } inputs.year.onblur = function() { this.value = this.value.trim(); checkYear(this); }; inputs.month.onblur = function() { this.value = this.value.trim(); checkMonth(this); }; </script> </body> </html>
test()方法:檢測(cè)正則表達(dá)式與指定的字符串是否匹配。
匹配成功時(shí),test()方法的返回值為true,否則返回false。
檢測(cè)正則對(duì)象的模式修飾符
RegExp類中還有一些屬性,用于檢測(cè)當(dāng)前正則對(duì)象使用的模式修飾符,以及指定下一次匹配的起始索引等。
下面為了讀者更好的理解這些屬性的使用,以實(shí)現(xiàn)空格的匹配為例進(jìn)行演示。
search()方法:可以返回指定模式的子串在字符串首次出現(xiàn)的位置,相對(duì)于indexOf()方法來(lái)說(shuō)功能更強(qiáng)大。
search()方法的參數(shù)是一個(gè)正則對(duì)象,如果傳入一個(gè)非正則表達(dá)式對(duì)象,則會(huì)使用“new RegExp(傳入的參數(shù))”隱式地將其轉(zhuǎn)換為正則表達(dá)式對(duì)象。
search()方法匹配失敗后的返回值為-1。
split()方法:用于根據(jù)指定的分隔符將一個(gè)字符串分割成字符串?dāng)?shù)組,其分割后的字符串?dāng)?shù)組中不包括分隔符。
當(dāng)分隔符不只一個(gè)時(shí),需要定義正則對(duì)象才能夠完成字符串的分割操作。
按照字符串中的“@”和“.”兩種分隔符進(jìn)行分割。
split()方法的參數(shù)為正則表達(dá)式模式設(shè)置的分隔符,返回值是以數(shù)組形式保存的分割后的結(jié)果。
注意
當(dāng)字符串為空時(shí),split()方法返回的是一個(gè)包含一個(gè)空字符串的數(shù)組“[“”]”,如果字符串和分隔符都是空字符串,則返回一個(gè)空數(shù)組“[]”。
在使用正則匹配方式分割字符串時(shí),還可以指定字符串分割的次數(shù)。
當(dāng)指定字符串分割次數(shù)后,若指定的次數(shù)小于實(shí)際字符串中符合規(guī)則分割的次數(shù),則最后的返回結(jié)果中會(huì)忽略其他的分割結(jié)果。
動(dòng)手實(shí)踐
密碼強(qiáng)度驗(yàn)證
密碼強(qiáng)度驗(yàn)證條件:
① 長(zhǎng)度<6位,無(wú)密碼強(qiáng)度。
②長(zhǎng)度>6位,而且包含數(shù)字、字母或其他字符中的一種,密碼強(qiáng)度為“低”。
③長(zhǎng)度>6位,而且包含數(shù)字、字母或其他字符中的二種,密碼強(qiáng)度為“中”。
④長(zhǎng)度>6位,而且包含數(shù)字、字母或其他字符中的三種及以上,密碼強(qiáng)度為“高”。
提出問(wèn)題:匹配一個(gè)連續(xù)出現(xiàn)的字符,如 6個(gè)連續(xù)出現(xiàn)的數(shù)字“458925”。
解決方案1:正則對(duì)象/\d\d\d\d\d\d/gi。
存在的問(wèn)題:重復(fù)出現(xiàn)的“\d”既不便于閱讀,書寫又繁瑣。
解決方案2:使用限定符(?、+、*、{ })完成某個(gè)字符連續(xù)出現(xiàn)的匹配。正則對(duì)象/\d{6}/gi。
當(dāng)點(diǎn)字符(.)和限定符連用時(shí),可以實(shí)現(xiàn)匹配指定數(shù)量范圍的任意字符。
舉例:“^hello.*world$”。
說(shuō)明:可匹配從hello開始到world結(jié)束,中間包含零個(gè)或多個(gè)任意字符的字符串。
正則在實(shí)現(xiàn)指定數(shù)量范圍的任意字符匹配時(shí),支持貪婪匹配和惰性匹配兩種方式。
所謂貪婪表示匹配盡可能多的字符,而惰性表示匹配盡可能少的字符。在默認(rèn)情況下,是貪婪匹配。
若想要實(shí)現(xiàn)惰性匹配,需在上一個(gè)限定符的后面加上“?”符號(hào)。
在正則表達(dá)式中,被括號(hào)字符“()”括起來(lái)的內(nèi)容,稱之為“子表達(dá)式”。
小括號(hào)實(shí)現(xiàn)了匹配catch和cater,而如果不使用小括號(hào),則變成了catch和er
未分組時(shí),表示匹配2個(gè)c字符;而分組后,表示匹配2個(gè)“bc”字符串。
捕獲:將子表達(dá)式匹配到的內(nèi)容存儲(chǔ)到系統(tǒng)的緩存區(qū)的過(guò)程。
非捕獲:不將子表達(dá)式的匹配內(nèi)容存放到系統(tǒng)的緩存中,使用(?:x)實(shí)現(xiàn)。
String對(duì)象的replace()方法,可直接利用$n(n是大于0的正整數(shù))獲取捕獲內(nèi)容,完成對(duì)子表達(dá)式捕獲的內(nèi)容進(jìn)行替換的操作。
第1個(gè)參數(shù)為正則表達(dá)式,用于與str字符串進(jìn)行匹配,將符合規(guī)則的內(nèi)容利用第2個(gè)參數(shù)設(shè)置的內(nèi)容進(jìn)行替換。
$2表示reg正則表達(dá)式中第2個(gè)子表達(dá)式被捕獲的內(nèi)容“Capture”。
$1表示第1個(gè)子表達(dá)式被捕獲的內(nèi)容“Regular”。
返回值是替換后的新字符串,因此,并不會(huì)修改原字符串的內(nèi)容。
可以使用”(?:x)”的方式實(shí)現(xiàn)非捕獲匹配
在編寫正則表達(dá)式時(shí),若要在正則表達(dá)式中,獲取存放在緩存區(qū)內(nèi)的子表達(dá)式的捕獲內(nèi)容,則可以使用“\n”(n是大于0的正整數(shù))的方式引用,這個(gè)過(guò)程就是“反向引用”。
“\1”表示第1個(gè)子表達(dá)式的捕獲內(nèi)容。
“\2”表示第2個(gè)子表達(dá)式的捕獲內(nèi)容,以此類推。
“\d”用于匹配0~9之間的任意一個(gè)數(shù)字。
為其添加圓括號(hào)“()”后,即可通過(guò)反向引用獲取捕獲的內(nèi)容。
因此,最后的匹配結(jié)果為333和666。
零寬斷言:指的是一種零寬度的子表達(dá)式匹配,用于查找子表達(dá)式匹配的內(nèi)容之前或之后是否含有特定的字符集。
分類:分為正向預(yù)查和反向預(yù)查,但是在JavaScript中僅支持正向預(yù)查,即匹配含有或不含有捕獲內(nèi)容之前的數(shù)據(jù),匹配的結(jié)果中不含捕獲的內(nèi)容。
正則表達(dá)式中的運(yùn)算符有很多。在實(shí)際應(yīng)用時(shí),各種運(yùn)算符會(huì)遵循優(yōu)先級(jí)順序進(jìn)行匹配。正則表達(dá)式中常用運(yùn)算符優(yōu)先級(jí),由高到低的順序如下表。
【案例】?jī)?nèi)容查找與替換
代碼實(shí)現(xiàn)思路:
編寫HTML,定義兩個(gè)文本域,一個(gè)用于用戶輸入,另一個(gè)用于顯示按照要求替換后的過(guò)濾內(nèi)容。
用戶輸入只要含有bad和任意中文字符,就利用*替換。
查找并替換的內(nèi)容規(guī)則:/(bad)|[\u4e00-\u9fa5]/gi。
代碼實(shí)現(xiàn)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>內(nèi)容查找與替換</title> <style> p{float:left;} input{margin:0 20px;} </style> </head> <body> <p>過(guò)濾前內(nèi)容:<br> <textarea id="pre" rows="10" cols="40"></textarea> <input id="btn" type="button" value="過(guò)濾"> </p> <p>過(guò)濾后內(nèi)容:<br> <textarea id="res" rows="10" cols="40"></textarea> </p> <script> document.getElementById('btn').onclick = function () { // 定義查找并需要替換的內(nèi)容規(guī)則,[\u4e00-\u9fa5]表示匹配任意中文字符 var reg = /(bad)|[\u4e00-\u9fa5]/gi; var str = document.getElementById('pre').value; var newstr = str.replace(reg, '*'); document.getElementById('res').innerHTML = newstr; }; </script> </body> </html>
以上是“JavaScript正則表達(dá)式怎么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。