前端的正则表达式

小灰灰 2020-04-21 02:59 790阅读 0赞

# 前端的正则表达式
**1. 概览**

在 `JavaScript` 中，使用 `//` 即可创建一个正则表达式对象，当然也可以使用 `new RegExp()`

常用的跟正则相关的方法有 `match`、`test` 和 `replace`。

其中 `match`，`replace` 都是字符串上的方法， `test` 是正则对象上的方法。

下面看具体的图示：

![](/images/1587437538323.png)

**2. 匹配单字符**

1. `/reg/` 可以直接匹配具体的字符串 `reg`。
2. `/[arzy]/` 中的中括号`[]` 则代表匹配 `arzy` 中的任意单个字符
3. `/[f-h]/` 中的中杠 `-` 代表匹配字母表顺序中 `f` 到 `h` 中的任意单个字符
4. `/[1-3]/` 则代表匹配数字 1 到 3

![](/images/1587437578817.png)

**3. 正则选项**

正则对象的后面也可以跟选项，`JavaScript` 中常用的选项有：

1. `i` - 代表忽略大小写
2. `m` - 代表多行匹配
3. `g` - 代表全局匹配（可以匹配多次）

![](/images/1587437662514.png)

**4. 边界匹配**

1. `^` - 代表匹配字符串的开头
2. `$` - 代表匹配字符串的结尾

![](/images/1587437719560.png)

**5. 字符匹配**

1. `.` - 可以匹配除了换行符外的任意字符
2. `\d` - 可以匹配任意数字
3. `\D` - 可以匹配任意**非**数字
4. `\s` - 匹配任意空白字符
5. `\S` - 匹配任意**非**空白字符
6. `\n` - 匹配换行
7. `\w` - 它其实就等同于 `[A-Za-z0-9_]`，即匹配字母数字下划线

![](/images/1587437770000.png)

**6. 量词匹配**

1. `*` - 匹配 0 次或多次
2. `+` - 匹配 1 次或多次
3. `?` - 匹配 0 次或 1 次
4. `{3}` - 匹配 3 次
5. `{2,4}` - 匹配 2、3 或 4 次
6. `{2,}` - 匹配 2 次或多次

![](/images/1587437825432.png)

**7. 分组**

`()` 小括号在正则中代表分组，一般在 `match` 方法中用来返回全匹配加上多个分组结果，如果使用了 `g` 选项，则只返回全匹配。

在小括号中你可以使用管道符号 `|`，它代表`或`

![](/images/1587437879568.png)

**8. 特殊字符**

匹配特殊符号的时候需要加反斜杠 `\`

JS 中的特殊字符有 `^ $ \ . * + ? () [] {} |`

所以如果你需要匹配星号 `*`，就需要这样写：

```
\*
```

![](/images/1587437920104.png)

**9. 取非匹配**

匹配除了某个字符的任意字符，需要在中括号`[]` 中使用 `^`

至此 `^` 具有两个含义：

1. 如果用于正则表达式的开头，代表匹配字符串的开头
2. 如果用于中括号 `[]` 内部，则代表匹配非此字符

![](/images/1587437955714.png)

**10. 完**

上面只是介绍了正则表达式中的基本用法，在日常开发中基本就够用了。更深入的用法比如 `贪婪和懒惰`、`零宽断言` 和 `捕获` ，感兴趣的小伙伴可以自行学习~

正则很强大，但是也不能滥用。如果你写出了一个很复杂的只有你能看懂的正则，更好的做法是不使用正则去实现它~

发表评论取消回复

表情：

评论列表（有 0 条评论，790人围观）

还没有评论，来说两句吧...

相关阅读

相关正则表达式 - 常用的正则表达式级正则的捕获

常用的正则表达式验证是否为有效数字 / 规则分析 1. 可能出现 + - ，也可能不出现 2. 一位0-9都可以，多位首位不能为0 3.小数部分

古城微笑少年丶/ 2022年12月28日 14:04/ 0 赞/ 180 阅读

相关【正则表达式】正则表达式及其应用

正则表达式 1. 什么是正则表达式？百度百科提供的概念是这样的：正则表达式，又称规则表达式\\。\\（英语：Regular Expression，在代码中常简写为

旧城等待，/ 2022年09月15日 06:08/ 0 赞/ 440 阅读

相关基本正则表达式，扩展的正则表达式详解

1).简单的grep grep \[option\] PATTERM \[file...\] \grep 'root' /etc/p

小鱼儿/ 2022年08月21日 04:51/ 0 赞/ 330 阅读

相关常用的正则表达式归纳—JavaScript正则表达式

来源：[http://www.ido321.com/856.html][http_www.ido321.com_856.html] 1、正则优先级首先看一下正则表达

素颜马尾好姑娘i/ 2022年08月12日 19:58/ 0 赞/ 141 阅读

相关正则表达式

看一遍就完全搞定的正则表达式教程正则表达式（regular expression）就是用一个“字符串”来描述一个特征，然后去验证另一个“字符串”是否符合这个特征。比如

墨蓝/ 2022年06月01日 11:59/ 0 赞/ 193 阅读

相关正则表达式

> 概念:是指用来描述或者匹配一系列符合某个语法规则的字符的单个字符串,其实就是一种规则。有自己的特殊应用。 > String类中有一个 String.mat

川长思鸟来/ 2022年05月19日 08:15/ 0 赞/ 195 阅读

相关正则表达式

正则表达式简介：正则表达式，又称规则表达式，正则表达式是对字符串（包括普通字符（例如，[a-Z]之间的字母）和特殊字符（称为“元字符”））操作的一种

约定不等于承诺〃/ 2022年04月18日 03:22/ 0 赞/ 256 阅读

相关正则表达式

正则表达式解析 \ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如，“n”匹配字符“n”。“\n”匹配一个换行符。

待我称王封你为后i/ 2022年04月17日 03:18/ 0 赞/ 205 阅读

相关正则表达式

正则表达式在线正则表达式测试：[http://tool.oschina.net/regex/][http_tool.oschina.net_regex] 正则表达式基础

╰半夏微凉°/ 2022年04月03日 09:38/ 0 赞/ 260 阅读

相关前端的正则表达式

在 `JavaScript` 中，使用 `//` 即可创建一个正则表达式对象，当然也可以使用 `new RegExp()`

小灰灰/ 2020年04月21日 02:59/ 0 赞/ 791 阅读