对js有一定的了解的coder，应该听过或看过这么一点小知识：可以用js原生的函数解决问题，尽量不要用正则表达式，后者会更好性能。

当仅仅是搜索某个字符串特定位置上的值时，我们没必要动用正则表达式，因为那样不但性能低下，反而可能会弄巧成拙。

包装类型 String 拥有的 charAt()、slice()、substr()、substring()、indexOf() 和 lastIndexOf() 等原生方法都非常适合查找特定字符串的位置，或者判断它们是否存在。

对字符串进行操作，在使用正则表达式之前，先考虑一下这些原生的 String 方法，它们有助于避免正则表达式带来的性能开销。

但是啊，有些比较复杂的匹配还是需要用到正则表达式。比如一些很常见的需求：

input便签只能输入：字母、数字或者下划线

<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，你可以使用明文创建你的字符集合，也可以使用正则表达式的特殊字符来创建。正则表达式的特殊字符可以笼统地认为是一类字符的集合，通过适当的组合可以建立起你需要的字符集合。

Paste_Image.png

创建正则表达式有且仅有一下两种方式：

• 使用 /.../

var partten = /<表达式正文>/<高级搜索标志>;

• 使用 new RegExp("...", "...")

var partten = new RegExp("<表达式正文>", "<高级搜索标志>");

本系列文章通过例子分别说明正则表达式的不同特殊字符的使用，正则表达式中特殊字符有36个

1.特殊字符： \

这个算是比较简单的一个字符，就是用来转义，有一定语言基础应该知道“转义”，由于一些原因有一部分字符会被用作保留字，不能直接使用，比如正则表达式的 + 就是保留字。比如你希望在匹配 abc+ef 中的 + 就不能直接用+去匹配，需要在前加上反斜杠 \ :

var str = "abc+ef"
var pattern = /\+/;
// 将+替换成d
var str = str.replace(pattern, "d");
console.log(str);  // 输出abcdef

传送门：demo

2.特殊字符：^

| 字符 | 匹配规则 |
| :---: | --- |
| ^ | 匹配输入的开始。如果多行标志被设置为true，那么也匹配换行符后紧跟的位置。例如，/^A/ 并不会匹配 "an A" 中的 'A'，但是会匹配 "An E" 中的 'A'。当 '^' 作为第一个字符出现在一个字符集合模式时，它将会有不同的含义。补充字符集合 一节有详细介绍和示例 |

补充说明：^ 的作用不但只是用来匹配开始，还可以配合 []起到 取反 的作用，请看以下两个例子：

// 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字符，这里没有使用全局搜索[匹配所有字符]，所以匹配到第一个相匹配的字符后就不再继续匹配
console.log(str3.replace(pattern, 'B')); 

传送门：demo

3.特殊字符： $

|字符|匹配规则|
|:--:|--|
|$|匹配输入的结束。如果多行标示被设置为true，那么也匹配换行符前的位置。例如，/t$/ 并不会匹配 "eater" 中的 't'，但是会匹配 "eat" 中的 't'。|

补充说明：$ 经常是和 ^ 配合使用

// 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结尾的只含字母的字符串。不知道 * 含义的请看这面一个特殊字符的说明
console.log(str2.replace(pattern, "AD"));  // 输出AD
console.log(str3.replace(pattern, "AD"));  // 原样输出abcd

传送门：demo

4.特殊字符：*

|字符|匹配规则|
|:--:|--|
||匹配前一个表达式0次或多次。等价于 {0,}。例如，/bo/会匹配 "A ghost boooooed" 中的 'booooo' 和 "A bird warbled" 中的 'b'，但是在 "A goat grunted" 中将不会匹配任何东西。|

*有通配的意思在很多的语言中，在程序员已经是一种共识，特别是在CSS中。这个虽然有点出入，但是有通配符的概念，对于记住 * 的含义很有帮助（至少我是这样认为）。可以牵强地联想一下：通配的意思就是可以是任意，可以联想到 匹配任意多次，虽然很牵强，但还是帮我记下来了，在不经常用正则表达式的情况下。

var str1 = "abbbbbbbc",   //b出现多次
    str2 = "ac";  // b没有出现
var pattern = /^ab*/;  // 匹配以a开头紧接0个或多个b的字串  
console.log(str1.replace(pattern, "AB"));  // 输出ABc
console.log(str2.replace(pattern, "AB"));  // 输出ABc

传送门：demo

5.特殊字符：+

|字符|匹配规则|
|:--:|--|
|+|匹配前面一个表达式1次或者多次。例如，/a+/匹配了在 "candy" 中的 'a'，和在 "caaaaaaandy" 中所有的 'a'。|

先上例子：

var str1 = "abbbbbbbc",   //b出现多次
    str2 = "ac";  // b没有出现
var pattern = /^ab+/;  // 匹配以a开头紧接至少出现一个b的字串  
console.log(str1.replace(pattern, "AB"));  // 输出ABc
console.log(str2.replace(pattern, "AB"));  // 输出ac

传送门：demo

6.特殊字符：?

|字符|匹配规则|
|:--:|--|
|?|匹配前面一个表达式0次或者1次。例如，/e?le?/ 匹配 "angel" 中的 'el'，和 "angle" 中的 'le' 以及"oslo' 中的'l'。|

对于 ? 有使用过三目运算符 Boolean ? exp1 : exp2; 其中 ? 就是用来判断真假，而真假可以联想到 1 和 0，这样就又可以比较牵强地记住？ 是匹配0次货1次的。另外，在正则表达式中，可以用来匹配出现次数的特殊字符就三个 *、+、?，如果你记住了*是匹配任意多次，?是匹配0次或1次，那么剩下的就是匹配至少出现一次。

var str1 = "ac",   //b没有多次
    str2 = "abc";  // b出现1次
    str3 = "abbc";  // b出现2次
var pattern = /^ab?c$/;  // 匹配以a开头紧接仅仅出现0次或1次b，并且以c结尾的字串  
console.log(str1.replace(pattern, "ABC"));  // 输出ABC
console.log(str2.replace(pattern, "ABC"));  // 输出ABC
console.log(str3.replace(pattern, "ABC"));  // 输出abbc

传送门：demo

附录