例子詳解正則表達式(一)

對js有一定的了解的coder枕面,應該聽過或看過這么一點小知識:可以用js原生的函數(shù)解決問題潮秘,盡量不要用正則表達式,后者會更好性能柜候。

當僅僅是搜索某個字符串特定位置上的值時躏精,我們沒必要動用正則表達式矗烛,因為那樣不但性能低下,反而可能會弄巧成拙碌嘀。

包裝類型 String 擁有的 charAt()、slice()开泽、substr()魁瞪、substring()导俘、indexOf() 和 lastIndexOf() 等原生方法都非常適合查找特定字符串的位置旅薄,或者判斷它們是否存在。

對字符串進行操作洛口,在使用正則表達式之前凯沪,先考慮一下這些原生的 String 方法妨马,它們有助于避免正則表達式帶來的性能開銷烘跺。

但是啊,有些比較復雜的匹配還是需要用到正則表達式梧喷。比如一些很常見的需求:

input便簽只能輸入:字母脖咐、數(shù)字或者下劃線

<input type="text">
<script>
var pattern = /\W*/g;
var $input = document.querySelectorAll("input")[0];
$input.addEventListener('keyup', function(){
    var val = $input.value;
    $input.value = val.replace(pattern, '');
}, false);
</script>

傳送門:demo

正則表達式就好比一個你希望通過匹配的字符集合适刀,比如在abcdef字符中,你希望匹配到abc笔喉,那么你所希望匹配到的字符集合就是abc,你可以使用明文創(chuàng)建你的字符集合作谭,也可以使用正則表達式的特殊字符來創(chuàng)建折欠。正則表達式的特殊字符可以籠統(tǒng)地認為是一類字符的集合吼过,通過適當?shù)慕M合可以建立起你需要的字符集合盗忱。

Paste_Image.png

創(chuàng)建正則表達式有且僅有一下兩種方式:

  • 使用 /.../
var partten = /<表達式正文>/<高級搜索標志>;
  • 使用 new RegExp("...", "...")
var partten = new RegExp("<表達式正文>", "<高級搜索標志>");

本系列文章通過例子分別說明正則表達式的不同特殊字符的使用扇谣,正則表達式中特殊字符有36個


1.特殊字符: \

這個算是比較簡單的一個字符闲昭,就是用來轉(zhuǎn)義序矩,有一定語言基礎應該知道“轉(zhuǎn)義”,由于一些原因有一部分字符會被用作保留字,不能直接使用幔烛,比如正則表達式的 + 就是保留字饿悬。比如你希望在匹配 abc+ef 中的 + 就不能直接用+去匹配狡恬,需要在前加上反斜杠 \ :

var str = "abc+ef"
var pattern = /\+/;
// 將+替換成d
var str = str.replace(pattern, "d");
console.log(str);  // 輸出abcdef

傳送門:demo


2.特殊字符:^

| 字符 | 匹配規(guī)則 |
| :---: | --- |
| ^ | 匹配輸入的開始。如果多行標志被設置為true弟劲,那么也匹配換行符后緊跟的位置兔乞。例如凉唐,/^A/ 并不會匹配 "an A" 中的 'A'台囱,但是會匹配 "An E" 中的 'A'簿训。當 '^' 作為第一個字符出現(xiàn)在一個字符集合模式時米间,它將會有不同的含義车伞。補充字符集合 一節(jié)有詳細介紹和示例 |

補充說明:^ 的作用不但只是用來匹配開始另玖,還可以配合 []起到 取反 的作用,請看以下兩個例子:

// Exp01  ^...
var str1 = "abc";
var str2 = "#abc";
var pattern = /^a/;  //匹配以a開頭的 **單字符**
console.log(str1.replace(pattern, "A"));  // 輸出Abc
console.log(str2.replace(pattern, "A"));  // 輸出#abc

// Exp02 [^...]
var str3 = "abc";
var pattern = /[^a]/;   //匹配第一個非a字符慷丽,這里沒有使用全局搜索[匹配所有字符]要糊,所以匹配到第一個相匹配的字符后就不再繼續(xù)匹配
console.log(str3.replace(pattern, 'B')); 

傳送門:demo


3.特殊字符: $

|字符|匹配規(guī)則|
|:--:|--|
|$|匹配輸入的結(jié)束锄俄。如果多行標示被設置為true奶赠,那么也匹配換行符前的位置毅戈。例如苇经,/t$/ 并不會匹配 "eater" 中的 't'宦言,但是會匹配 "eat" 中的 't'。|

補充說明:$ 經(jīng)常是和 ^ 配合使用

// EXp01
var str1 = "abcddd";
var pattern = /d$/;
console.log(str1.replace(pattern, "D"));  // 輸出abcddD

// Exp02
var str2 = "abbbbc", str3 = "abcd";
var pattern = /^a[a-zA-Z]*c$/;  // 匹配以a開頭令花,d結(jié)尾的只含字母的字符串。不知道 * 含義的請看這面一個特殊字符的說明
console.log(str2.replace(pattern, "AD"));  // 輸出AD
console.log(str3.replace(pattern, "AD"));  // 原樣輸出abcd

傳送門:demo


4.特殊字符:*

|字符|匹配規(guī)則|
|:--:|--|
||匹配前一個表達式0次或多次。等價于 {0,}扮碧。例如慎王,/bo/會匹配 "A ghost boooooed" 中的 'booooo' 和 "A bird warbled" 中的 'b',但是在 "A goat grunted" 中將不會匹配任何東西蜀漆。|

*有通配的意思在很多的語言中确丢,在程序員已經(jīng)是一種共識鲜侥,特別是在CSS中诸典。這個雖然有點出入狐粱,但是有通配符的概念,對于記住 * 的含義很有幫助(至少我是這樣認為)互墓。可以牽強地聯(lián)想一下:通配的意思就是可以是任意齿诞,可以聯(lián)想到 匹配任意多次祷杈,雖然很牽強但汞,但還是幫我記下來了,在不經(jīng)常用正則表達式的情況下僵缺。

var str1 = "abbbbbbbc",   //b出現(xiàn)多次
    str2 = "ac";  // b沒有出現(xiàn)
var pattern = /^ab*/;  // 匹配以a開頭緊接0個或多個b的字串  
console.log(str1.replace(pattern, "AB"));  // 輸出ABc
console.log(str2.replace(pattern, "AB"));  // 輸出ABc

傳送門:demo


5.特殊字符:+

|字符|匹配規(guī)則|
|:--:|--|
|+|匹配前面一個表達式1次或者多次。例如踩叭,/a+/匹配了在 "candy" 中的 'a'磕潮,和在 "caaaaaaandy" 中所有的 'a'。|

先上例子:

var str1 = "abbbbbbbc",   //b出現(xiàn)多次
    str2 = "ac";  // b沒有出現(xiàn)
var pattern = /^ab+/;  // 匹配以a開頭緊接至少出現(xiàn)一個b的字串  
console.log(str1.replace(pattern, "AB"));  // 輸出ABc
console.log(str2.replace(pattern, "AB"));  // 輸出ac

傳送門:demo


6.特殊字符:?

|字符|匹配規(guī)則|
|:--:|--|
|?|匹配前面一個表達式0次或者1次容贝。例如自脯,/e?le?/ 匹配 "angel" 中的 'el',和 "angle" 中的 'le' 以及"oslo' 中的'l'斤富。|

對于 ? 有使用過三目運算符 Boolean ? exp1 : exp2; 其中 ? 就是用來判斷真假膏潮,而真假可以聯(lián)想到 1 和 0,這樣就又可以比較牽強地記住满力? 是匹配0次貨1次的焕参。另外,在正則表達式中脚囊,可以用來匹配出現(xiàn)次數(shù)的特殊字符就三個 *悔耘、+缓艳、?互妓,如果你記住了*是匹配任意多次澈蚌,?是匹配0次或1次,那么剩下的就是匹配至少出現(xiàn)一次盈电。

var str1 = "ac",   //b沒有多次
    str2 = "abc";  // b出現(xiàn)1次
    str3 = "abbc";  // b出現(xiàn)2次
var pattern = /^ab?c$/;  // 匹配以a開頭緊接僅僅出現(xiàn)0次或1次b轩猩,并且以c結(jié)尾的字串  
console.log(str1.replace(pattern, "ABC"));  // 輸出ABC
console.log(str2.replace(pattern, "ABC"));  // 輸出ABC
console.log(str3.replace(pattern, "ABC"));  // 輸出abbc

傳送門:demo


附錄

方法 描述
replace 傳送門 一個在字符串中執(zhí)行查找匹配的String方法彤委,并且使用替換字符串替換掉匹配到的子字符串。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖孙咪,帶你破解...
    沈念sama閱讀 217,826評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件杨蛋,死亡現(xiàn)場離奇詭異,居然都是意外死亡寇荧,警方通過查閱死者的電腦和手機镀琉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評論 3 395
  • 文/潘曉璐 我一進店門装黑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 164,234評論 0 354
  • 文/不壞的土叔 我叫張陵持灰,是天一觀的道長。 經(jīng)常有香客問我洞坑,道長排拷,這世上最難降的妖魔是什么忙菠? 我笑而不...
    開封第一講書人閱讀 58,562評論 1 293
  • 正文 為了忘掉前任傍睹,我火速辦了婚禮访得,結(jié)果婚禮上杜耙,老公的妹妹穿的比我還像新娘。我一直安慰自己蜕便,他們只是感情好,可當我...
    茶點故事閱讀 67,611評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般陈醒。 火紅的嫁衣襯著肌膚如雪惶凝。 梳的紋絲不亂的頭發(fā)上洒疚,一...
    開封第一講書人閱讀 51,482評論 1 302
  • 那天喊括,我揣著相機與錄音,去河邊找鬼。 笑死距糖,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播泪幌,決...
    沈念sama閱讀 40,271評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼阀湿,長吁一口氣:“原來是場噩夢啊……” “哼眶诈!你這毒婦竟也來了溯警?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,166評論 0 276
  • 序言:老撾萬榮一對情侶失蹤浙炼,失蹤者是張志新(化名)和其女友劉穎厅缺,沒想到半個月后娩践,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,608評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡化戳,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,814評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了蟀瞧。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片条摸。...
    茶點故事閱讀 39,926評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡顷啼,死狀恐怖钙蒙,靈堂內(nèi)的尸體忽然破棺而出扛施,到底是詐尸還是另有隱情饥脑,我是刑警寧澤赋除,帶...
    沈念sama閱讀 35,644評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站敞嗡,受9級特大地震影響颁糟,放射性物質(zhì)發(fā)生泄漏航背。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,249評論 3 329
  • 文/蒙蒙 一棱貌、第九天 我趴在偏房一處隱蔽的房頂上張望玖媚。 院中可真熱鬧,春花似錦键畴、人聲如沸最盅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽涡贱。三九已至,卻和暖如春惹想,著一層夾襖步出監(jiān)牢的瞬間问词,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評論 1 269
  • 我被黑心中介騙來泰國打工嘀粱, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留激挪,地道東北人。 一個月前我還...
    沈念sama閱讀 48,063評論 3 370
  • 正文 我出身青樓锋叨,卻偏偏與公主長得像垄分,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子娃磺,可洞房花燭夜當晚...
    茶點故事閱讀 44,871評論 2 354

推薦閱讀更多精彩內(nèi)容