對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>
正則表達式就好比一個你希望通過匹配的字符集合适刀,比如在abcdef
字符中,你希望匹配到abc笔喉,那么你所希望匹配到的字符集合就是abc
,你可以使用明文創(chuàng)建你的字符集合作谭,也可以使用正則表達式的特殊字符來創(chuàng)建折欠。正則表達式的特殊字符可以籠統(tǒng)地認為是一類字符的集合吼过,通過適當?shù)慕M合可以建立起你需要的字符集合盗忱。
創(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
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'));
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
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
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
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
附錄
方法 | 描述 |
---|---|
replace 傳送門 | 一個在字符串中執(zhí)行查找匹配的String方法彤委,并且使用替換字符串替換掉匹配到的子字符串。 |