JavaScript 正則應(yīng)用詳解【模式、欲查、反向引用等】
本文實(shí)例講述了JavaScript 正則應(yīng)用。分享給大家供大家參考，具體如下：
正則應(yīng)用
正則表達(dá)式在web開(kāi)發(fā)中的常用
郵箱驗(yàn)證
用戶名驗(yàn)證
替換字符串某一部分
信息采集，用來(lái)分析有效代碼段
...
有規(guī)律的字符串描述
正則表達(dá)式是一門獨(dú)立的知識(shí)，同樣的一段描述，比如，對(duì)于email的匹配表達(dá)式，在不同的語(yǔ)言是一樣的，但是調(diào)用的函數(shù)不同。
正則表達(dá)式--規(guī)則表達(dá)式
正則表達(dá)式：正則表達(dá)式
正則表達(dá)式語(yǔ)法：正則表達(dá)式語(yǔ)法
正則表達(dá)式語(yǔ)言：正則表達(dá)式語(yǔ)言
準(zhǔn)備性的工作
在js中，如何寫正則表達(dá)式。 /RegExp/
在js里，用正則表達(dá)式來(lái)驗(yàn)證字符串是否滿足， 使用 reg.test(str);
用正則表達(dá)式的exec函數(shù)，用來(lái)查找匹配的選項(xiàng)，并把查找的值取出。
reg.test(str); 返回true 或者false 。 常在表單驗(yàn)證中使用。
<from action="xxx.php" id="biaodan">
<p>請(qǐng)輸入姓名：<input type="text" id="name" /></p>
<p>請(qǐng)輸入年齡：<input type="text" id="age" /></p>
<p><input type="submit" /></p>
</from>
<script>
var oBD = document.getElementById('biaodan');
var oName = document.getElementById('name');
var oAge = document.getElementById('age');
//表單試圖提交的時(shí)候，觸發(fā)onsubmit事件
//這個(gè)函數(shù)返回了false,表單不會(huì)被提交
oBD.onclick = function(){
//驗(yàn)證name
if( !/^[\u4e00-\u9fa5]{2,4}$/.test(oName.value) ) return false;
//驗(yàn)證年齡
if( !/^\d{2,3}$/.test(oAge.value) ) return false;
if( parseInt( oAge.value )<10 || parseInt( oAge.value )>104 ) alert('您輸入的年齡不在范圍') return
false;
return true;
}
</script>
exec(); 返回 數(shù)組 或 null。
exec是英語(yǔ)execute的意思，CEO首席執(zhí)行官，E就是executive執(zhí)行的
“執(zhí)行” 把正則式放到字符串上執(zhí)行
每次執(zhí)行結(jié)果按序輸出，不管結(jié)果有幾個(gè)，一次只輸出一個(gè) ，如果多次輸出，會(huì)保持前面的引用。當(dāng)匹配超過(guò)原字符串的時(shí)候，會(huì)返回null。然后遇到null，指針?lè)祷氐狡ヅ涞淖址牡谝晃弧?具有迭代器的感覺(jué)。
var str = 'ABCDEFG1234567abcdefg';
var reg = /[a-z]/g;
console.log( a=/[a-z]/g.exec(str) );
var a;
while( a=reg.exec(str) ){ //這邊 null 為 fasle。 exec() 會(huì)保持對(duì)前面一次的引用。 需要使用 值來(lái)賦值。
console.log( a );
}
使用exec() 找最大子串
var str = 'AAABBBCCCCCCC';
var reg = /(\w)\1+/g;
var maxLength = 0;
var maxLetter = '';
var a;
while( a=reg.exec(str) ){
if( a[0].length>maxLength ){
maxLength = a[0].length;
maxLetter = a[0];
}
}
console.log( maxLetter );
var str='BCDEFG1234567abcdefg';
var reg = /[a-z]/g;
var a;
while( (a=reg.exec(str)) != null ){ //先賦值給a，然后再與后邊判斷。
console.log( a );
}
str.match( reg ); //查找，匹配到，返回?cái)?shù)組
str.split( reg ); //拆分，返回?cái)?shù)組
str.serch( reg ); //查找位置
str.replace( reg,'new str'); //正則替換，返回string
//測(cè)試是否含有hi
var reg = /hi/; //僅看字符串是否有 hi
console.log( reg.test('hello') ); //fasle
console.log( reg.test('this is iqianduan') ); //true
//測(cè)試單詞 hi
var reg01 = /\bhi\b/;
console.log( reg01.test('this is') ); //false
console.log( reg01.test('this is, hi,his') );//true
正則表達(dá)式 3 句話
要找什么字符？
從哪兒找？
找?guī)讉€(gè)？
要找什么字符
字面值， ‘hi' ，就是找‘hi'。
用字符的集合來(lái)表示 ， [abcd], 指匹配abcd中任意一個(gè)
//找不吉利的數(shù)字
//3,4,7
var reg = /[3,4,7]/; //字符集合， 不能使用 /347/ 字面值表示，是表示整體。
console.log( reg.test('12121212') );//false
console.log( reg.test('12341234') ); //true
用范圍表示字符 ， [0-9] [0123456789] [a-z] [A-Z]
// var reg = /[0123456789]/;
var reg = /[0-9]/;
console.log( reg.test('123afsdf') ); //true
console.log( reg.test('asdf') ); //false
//是否有大寫字母
var reg = /[A-Z]/;
console.log( reg.test('asdf') );//false
console.log( reg.test('Tomorrow is another day') ); //true
字符簇, 花團(tuán)錦簇-> 一坨字符。
系統(tǒng)為常用的字符集合，創(chuàng)建的簡(jiǎn)寫.
例如：
-
[0-9]-->\d -
[0-9a-zA-Z_]-->\w.. 域名，注冊(cè)用戶名常用的模式. -
[\t\v\f\r\n]-->\s空白符.
//是否含有數(shù)字
var reg = /\d/;
console.log( reg.test('123afsdf') ); //true
console.log( reg.test('asdf') ); //false
補(bǔ)集的形式來(lái)表示字符集合 在集合前面使用表示補(bǔ)集。
-
[0-9]--->[^0-9]^ 脫字符號(hào)： 念法： caret。['kærət] 。 -
[abcdef]-->[^abcdef]//驗(yàn)證全為數(shù)字
var reg = /^[0-9]/; //匹配非數(shù)字
// var reg = /^d/ //字符簇補(bǔ)集
console.log( reg.test('aaaaa') );//非數(shù)字存在 false
console.log( reg.test('123aaa') ); //有數(shù)字存在 true
字符簇的補(bǔ)集：
-
d -- > D(非數(shù)字)
-
s --> S(非空白字符)
-
w --> W
-
任意字符 ： . 唯獨(dú)不包括換行符
從哪兒找，找到哪兒
b 單詞邊界
/bhi/ --> 從單詞的邊界開(kāi)始匹配hi。
// 匹配單詞hi,包括hi本身
// var reg = /\bhi.+/;//錯(cuò)誤
// var reg = /\bhi\w+/; //錯(cuò)誤。 + --> 至少有 一個(gè)
var reg = /\bhi\w*/;
console.log( reg.exec('this is') ); //null
console.log( reg.exec('his') ); //["his", index: 0, input: "his"]
console.log( reg.exec('history') ); //["history", index: 0, input: "history,hi"]
//匹配進(jìn)行時(shí)的結(jié)尾
var reg = /\b[a-zA-Z]+ing\b/;
console.log( reg.exec('going') );//["going", index: 0, input: "going"]
console.log( reg.exec('1ting.com') );//null
console.log( reg.exec('ing') );//null //2 -> to 4->for 0->zero
//匹配un前綴的反義詞
//unhappy happy,hungry,sun,unhappy
var reg = /\bun[\w]+\b/;
console.log( reg.exec('happy,hungry,sun,unhappy') ); //["unhappy", index: 17, input: "happy,hungry,sun
,unhappy"]
B 單詞的非邊界
// 把單詞中間的某一個(gè)部分取出來(lái)。
// 把中間含有hi的單詞取出，即hi不能在兩端。
var reg = /\Bhi\B/;
console.log( reg.exec('this') ); //["hi", index: 1, input: "this"]
console.log( reg.exec('hi') ); //null
^ creat , 從字符串的起始位置開(kāi)始匹配
$ 匹配到字符串的結(jié)束位置
從字符串的開(kāi)頭到結(jié)尾開(kāi)始匹配，模擬運(yùn)行順序.
var reg = /^lishi$/;
console.log( reg.exec('lishinihao') ); null
console.log( reg.exec('lishi') ); //["lisi", index: 0, input: "lisi"]
找多少
*， [0,n] --> {0, }
+, [1,n] -->{1, }
? , [0,1] -->{0,1}
n {n} {3} a{n} , 字符a準(zhǔn)確的出現(xiàn)n次
a{n,} 字符a，至少出現(xiàn)n次。
a{n,m} 字符串a(chǎn)，出現(xiàn)n到m次。
模式
以匹配為例，默認(rèn)情況下，找到一次結(jié)果符合就結(jié)束。
告知匹配過(guò)程，一直找，在全文范圍內(nèi)一直找。
g -> 全局模式， global 找所有的，而不是找一次就結(jié)束
i -> 忽略大小寫，ignore
//查找所有中間含有hi的單詞 var reg = /\Bhi\B/gi; var str = 'shit,hi,this,thit,THIS'; console.log( str.match(reg) ); //["hi", "hi", "hi", "HI"]
確定邊界是什么，那些東西必須有，那些東西可能有可能沒(méi)有。配合+，*
//把鏈接換成 # //<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> --> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> //1,不能保留鏈接的文字(反向引用) //2,不能跨行(貪婪模式) var reg = /<a[\s]+.*<\/a>/g; var str = '<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>'; console.log( str.replace(reg,'<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >文字</a>') );
js不支持單行模式。
//s 單行模式：把整個(gè)字符串看成一行 . 代表任意，但不包括換行。
在js里，不支持當(dāng)行模式的情況下，如何換行？
什么樣的模式能代表“所有” 字符串
sS 全部字符 使用一個(gè)技巧， 一個(gè)集合加補(bǔ)集，就是全集
[dD] [sS] [wW]
var reg = /\<a[\s][\s\S]+<\/a>/g; var str = '<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+ '</a>'; console.log( str.replace(reg,'<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >文字</a>') ); //s 多行模式：碰到一行就把當(dāng)前的當(dāng)成一個(gè)字符串來(lái)解析
//把每一行的結(jié)尾的數(shù)字換成 # //車牌號(hào) //Cx003 //A0008 //B3456 var str = 'Cx003'+ 'A0008'+ 'B3456'; var reg = /\d+$/gm; console.log( str.replace(reg,'#') );
貪婪模式
如果'?'緊跟在在任何量詞*, + , ?，或者是{}的后面，將會(huì)使量詞變成非貪婪模式（匹配最少的次數(shù)），和默認(rèn)的貪婪模式（匹配最多的次數(shù)）正好相反。
比如，使用/d+/非全局的匹配“123abc”將會(huì)返回“123”，如果使用/d+?/,那么就只會(huì)匹配到“1”。
當(dāng)正則表達(dá)式中包含能接受重復(fù)的限定符時(shí)，通常的行為是（在使整個(gè)表達(dá)式能得到匹配的前提下）匹配盡可能多的字符。以這個(gè)表達(dá)式為例：a.b，它將會(huì)匹配最長(zhǎng)的以a開(kāi)始，以b結(jié)束的字符串。如果用它來(lái)搜索aabab的話，它會(huì)匹配整個(gè)字符串a(chǎn)abab。這被稱為貪婪匹配。
任何量詞后面 跟 ? 代表非貪婪模式 ， 滿足條件就不找了，小富即安，打完收工。 修飾個(gè)數(shù)，盡量少找和多找的。
//goooooooooods --> goods
var str = 'goooooooooods,goooods,goooood,gooooo,gooooods';
var reg = /g[o]{3,}?ds/g;
console.log( str.replace(reg,'goods') ); //goods,goods,goooood,gooooo,goods
欲查
正向欲查
欲查不消耗字符。
//查找進(jìn)行時(shí)的單詞的詞根， 即 不要ing 。 going -> go var str = 'going,comming,fly'; // var reg = /\b[a-zA-Z]+ing\b/g; var reg = /\b[\w]+(?=ing)\b/g; // 類似探照燈，先去判斷幾位是否滿足，滿足返回，不滿足繼續(xù)下一位. console.log( str.match(reg) );
滿足 ing ，找到com。
不滿足接著走。 看見(jiàn)不滿足條件，并不會(huì)一次性調(diào)到ing后面接下去尋找，而是從該處光標(biāo)繼續(xù)尋找。
已經(jīng)查找的詞是消耗了，下次從該處光標(biāo)開(kāi)始尋找。
//查找進(jìn)行時(shí)的單詞的詞根， 即 不要ing 。 going -> go var str = 'going,comming,fly'; // var reg = /\b[a-zA-Z]+ing\b/g; // var reg = /\b[a-zA-Z]+(?=ing)\b/g; //結(jié)尾\b 是錯(cuò)誤的， 欲查不消耗字符， 相當(dāng)于/\b[a-zA-Z]+\b/ 這種形式 var reg = /\b[a-zA-Z]+(?=ing)/g; // 類似探照燈，先去判斷幾位是否滿足，滿足返回，不滿足繼續(xù)下一位. console.log( str.match(reg) ); // ["go", "comm"]
負(fù)向欲查
不是誰(shuí)才行。 往后看一定位數(shù)，不是誰(shuí)才可以。 不要后面是某某某的東西。
//查找win98,win95,win32,win2003,winxp -->win98,win32,win2003,winxp var str = 'win98,win95,win32,win2003,winxp'; var reg = /\bwin(?!95)/g; console.log( str.match(reg) ); // ["win", "win", "win", "win"]
js不支持，向前正向欲查，向前負(fù)向欲查：
//找出 un系列單詞的詞根 var reg = /[\w]+(?<=un)/g; var str = 'unhappy'; console.log(str.match(reg)); //報(bào)錯(cuò) var reg = /[\w]+(?<!=un)/g; //向前負(fù)向欲查
反向引用
反向引用，也叫后向引用。或者分組或子表達(dá)式
一般是整個(gè)表達(dá)式， 但是中間的部分 有特殊做了描述。 需要的部分特殊處理。使用分組，叫做子表達(dá)式。
//把鏈接換成空連接，保持文字信息。
var str = '<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >陰天快樂(lè)</a>';
var reg = /<a[\s]+[^>]+>([^<>]+)<\/a>/; //超鏈接的表達(dá)式
console.log( reg.exec(str) ); //["<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >陰天快樂(lè)</a>", "陰天快樂(lè)", index: 0
, input: "<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >陰天快樂(lè)</a>"] //能夠把子表達(dá)式的東西匹配出來(lái)。
// console.log( str.replacte(reg,'#') );
/**
<a[\s]+[^>]>([^<>]+)<\/a> 主要目的是想要中間那一塊
除了>之外的都可行 ， 取> 的補(bǔ)集 [^>]
中間部分純文字，不含大于號(hào)，和小于號(hào)。 取小于號(hào)和大于號(hào)的補(bǔ)集 [^<>]+ / [\s\S]+
*/
//一般是整個(gè)表達(dá)式， 但是中間的部分 有特殊做了描述。 需要的部分特殊處理。使用分組，叫做子表達(dá)式。
//匹配html
// /<\s*(\S+)(\s[^>]*)?>[\s\S]*<\s*\/\1\s*>/
/*exec為例：
匹配到的數(shù)組，第0個(gè)單元，代表"整個(gè)正則表達(dá)式的匹配結(jié)果"
1,2,3,4....N,則代表第N個(gè)子表達(dá)式匹配的結(jié)果。 //js頂多有9個(gè)子表達(dá)式。 // ["<a href="http://www.baidu
.com">陰天快樂(lè)</a>", "陰天快樂(lè)", index: 0, input: "<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >陰天快樂(lè)</a>"]
*/
console.log( str.replace(reg,'<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >$1</a>') ); //<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >陰天快樂(lè)</a>
var str = '<html></html>';
var reg = /<\s*(\S+)(\s[^>]*)?>[\s\S]*<\s*\/\1\s*>/;
console.log( reg.exec(str) );
str.replace(reg,function( $1,$2 ){
console.dirxml($2); //html
});
如何引用子表達(dá)式所匹配的結(jié)果?
-
在正則外邊使用：$N 來(lái)匹配 第N個(gè)子表達(dá)式的匹配結(jié)果。
-
在正則里邊使用N來(lái) 使用第N個(gè)子表達(dá)式。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript正則表達(dá)式技巧大全》、《JavaScript替換操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- javascript表單正則應(yīng)用
- JS 正則表達(dá)式中小括號(hào)的應(yīng)用
- JS應(yīng)用正則表達(dá)式轉(zhuǎn)換大小寫示例
- JavaScript 正則表達(dá)式之RegExp屬性、方法及應(yīng)用分析
- JavaScript中正則表達(dá)式的概念與應(yīng)用
- js replace正則表達(dá)式應(yīng)用案例講解
- JScript中正則表達(dá)函數(shù)的說(shuō)明與應(yīng)用
- JavaScript正則表達(dá)式校驗(yàn)與遞歸函數(shù)實(shí)際應(yīng)用實(shí)例解析
- javascript中正則表達(dá)式反向引用示例介紹
- JavaScript正則表達(dá)式之后向引用實(shí)例代碼
- 詳解JavaScript正則表達(dá)式之分組匹配及反向引用
- AS3 js正則表達(dá)式 反向引用(backreference)
相關(guān)文章
下面小編就為大家?guī)?lái)一篇簡(jiǎn)單封裝js的dom查詢實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
這篇文章主要為大家介紹了JS中常見(jiàn)編碼及加密方式解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
避免回車鍵導(dǎo)致的頁(yè)面無(wú)意義刷新的解決方法
相信大家在實(shí)現(xiàn)頁(yè)面局部刷新過(guò)程中都遇到過(guò)類似的問(wèn)題：在文本框中輸入完要搜索的關(guān)鍵字段，按回車結(jié)果整個(gè)頁(yè)面刷新了，局部刷新肯定失敗。2011-04-04
uniapp上傳二進(jìn)制圖片的實(shí)現(xiàn)
本文主要介紹了uniapp上傳二進(jìn)制圖片的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
本文通過(guò)示例向大家簡(jiǎn)單分析了javascript的事件和方法，文章簡(jiǎn)潔而不簡(jiǎn)單，是篇非常不錯(cuò)的基礎(chǔ)文章，這里推薦給大家。2015-02-02
這篇文章主要介紹了JavaScript生成隨機(jī)字符串的方法,涉及javascript中random的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
多個(gè)js毫秒倒計(jì)時(shí)同時(shí)進(jìn)行效果
這篇文章主要以實(shí)例的方式講解多個(gè)js毫秒倒計(jì)時(shí)同時(shí)進(jìn)行效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要為大家介紹了JavaScript中的聲明提升實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
JavaScript垃圾回收機(jī)制(引用計(jì)數(shù),標(biāo)記清除,性能優(yōu)化)
這篇文章主要介紹了JavaScript垃圾回收機(jī)制(引用計(jì)數(shù),標(biāo)記清除,性能優(yōu)化),垃圾回收是JavaScript的隱藏機(jī)制，我們通常無(wú)需為垃圾回收勞心費(fèi)力，只需要專注功能的開(kāi)發(fā)就好了2022-07-07
微信/支付寶小程序?qū)崿F(xiàn)彈窗動(dòng)畫縮放到某個(gè)位置的示例代碼
本文詳細(xì)介紹了如何使用HTML、CSS和JavaScript實(shí)現(xiàn)動(dòng)畫函數(shù),包括參數(shù)設(shè)置和動(dòng)畫過(guò)程中的狀態(tài)管理,文章還涉及了如何獲取DOM元素、設(shè)置動(dòng)畫開(kāi)始和結(jié)束的回調(diào)函數(shù),感興趣的朋友跟隨小編一起看看吧2024-10-10