DevUI是面向企业中后台产品的开源前端解决方案，其设计价值观基于高效、开放、可信、乐趣四种自然与人文相结合的理念，旨在为设计师、前端开发者提供标准的设计体系，并满足各类落地场景，是一款企业级开箱即用的产品。

感谢我们的DevUI社区贡献者何宇峰提供的优质文章！

前言

正则表达式 ，又称规则表达式 , （Regular Expression，在代码中常简写为regex、regexp或RE），是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"），是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串，通常被用来检索、替换那些符合某个模式（规则）的文本。--来自百科

正则表达式发展至今，无论是在前端还是后端开发中都扮演着比较重要的角色：

输入的校验规则、关键信息提取、搜索替换、以及日志分析等文本处理等。甚至如webstorm、idea等编译器也提供了正则表达式的搜索匹配功能。

而通常学习正则表达式的方式有两种：一、系统学习，熟悉全部的规则后水到渠成。二、实践中带着例子学习。这里推荐第二种方式，相对来说投入产出的时间代价更低。

例、先从几个简单的例子入手

大家可以花一些时间观察下面几个简单的例子

（A）关注点一

如果作为一个接触不多的新童鞋，务必熟记：看懂正则表达式是一个***拆分化繁为简***的过程

（B）关注点二

例子所给出的图片中，转义符，分隔符，起止符，括号，数量符，这些基本包括了大部分开发过程中接触到的正则符号。明确这五种符号含义，对简化看懂整个正则表达式有很大帮助。

如下图是一个逐渐拆分简化的一般过程

1、基本用法

1.1、括号

正则表达式中，三种括号有不同的含义。

大括号 {}：数量关系，在正则表达式中，大括号 {} 表示重复次数：

复制代码

{n}：精确匹配出现的次数，例如 \d{3} 匹配三个连续的数字。
{n,}：至少匹配 n 次，例如 \d{4,} 匹配至少四个连续的数字。 
{n,m}：匹配 n 到 m 次，例如 \w{2,4} 匹配出现两到四次字母、数字或下划线。

中括号 []：或关系，括号内任意字符有一项满足即可，无修饰只可匹配一项。在正则表达式中，中括号 [] 表示一个集合，包含要匹配的字符：

less 复制代码

[abc]：匹配字符 a、b 或 c。  
[a-z]：匹配任何小写字母。  
[A-Z]：匹配任何大写字母。  
[0-9]：匹配任何数字字符。  
[^abc]：匹配除了 a、b、c 以外的任何字符。 注：[6^]:1231615+^  
[a-z&&[^aeiou]]：匹配任何小写字母，但排除元音字母。

**小括号 ()：匹配和括号内相同的内容，严格的顺序数量关系，且可分割表达式。在正则表达式中，小括号 () 表示一个分组。作用类似于数学计算中的小括号。 **

css 复制代码

(abc)匹配子字符串 abc。  
(a|b|c)匹配 a、b 或 c。  
(?:abc)非捕获分组，匹配子字符串 abc，但不捕获。  
(\d{3}-\d{4}）捕获分组，匹配任何包含一个三个连续数字加短线加四个连续数字的组合

例用一个简单的例子概括一下大中小括号的关系：

1.2. 数量和修饰符

正则表达式中数量有多种表现形式：

除了数量符外，修饰符也是能经常接触到的用法：

1.3、开始和结束符

开始和结束符限制了一串要匹配的内容必须以XX开头或XX结束。

2、进阶提高

2.1 断言

断言跟在特征前后，具体化你想要的内容

1.?= （修饰在后，所需在前。巧记：像括号解释说明一样）

2.?! （修饰非所需。感叹号容易联想到非）

3.?<= （我有小于号，所以我在前面修饰我想要的内容。）

4.?<! （我有感叹号，你懂得。）

注意：正则表达式中被断言符号修饰的一定是作为修饰内容，用来提取目标内容。

复制代码

上面的例子1中，被断言符号修饰的是 空格fat'， 而真正要匹配出来的内容是被 '空格fat' 修饰的目标内容'the'

2.2 贪婪惰性匹配

正则表达式默认采用贪婪匹配模式，在该模式下意味着会匹配尽可能长的子串。我们可以使用 ? 将贪婪匹配模式转化为惰性匹配模式。

先看两个例子：

例1

例2

解释：上面两个例子中，我们可以看到，正则表达式会最大程度匹配满足要求的内容，加了'?'后，只要满足要求，匹配内容一旦满足要求便会返回。

注：'?'通常被加在数量修饰词后，+，*，{}，甚至？本身。不过'??'这种形式和空所匹配的内容没什么区别，实际使用中几乎不会被用到。

2.3 JS正则常见方法(match、exec、test、search、replace、split)

match

match:

注：如果match匹配正则中存在"/g"这种类似的修饰符，那么匹配内容是符合条件的list，但如果不带修饰符，那么匹配的内容依次为[匹配的字符串 ；；匹配的字符串坐在的索引位置，从0开始计算 ；；原始字符串 ；；undefined]

exec

exec

注：exec的匹配结果类似于match不带修饰符，且保留了分组功能，但值得注意的是，exec常用来匹配单个满足要求的结果或分组而不是全局范围内满足规则的结果。

test

test

注：同其他的方法一样，需要注意的是字符串和正则表达式在函数使用时的位置

search

search

replace

replace

搭配断言使用很有效哦，如修改特定格式的金额。（xx元，$35）

split

split

注:除了常用的将字符串转为数组格式，split同样可以搭配正则表达式来使用，分割每一项的标志，分割成list的长度都可以通过参数进行控制，功能十分强大。

优质网站推荐

1.正则可视化

wangwl.net/static/proj...

功能强大的正则表达式可视化网站，

1.通过详细的图解和自己输入的示例来进一步加深理解，提高效率

2.提供上述匹配方法，使用方便

3.文字描述功能

2.学习网站！！！

正则系统学习网站：知识点总结相对到位，同时有多例子支撑，提供在线练习功能，配合正则可视化网站快速提高。

网站1

github.com/ziishaned/l...

网站2

deerchao.cn/tutorials/r...

🔥 加入我们

DevUI Design 官网: devui.design/home
GitHub仓库: github.com/DevCloudFE/...

如果你今天刚刚加入我们，可以先看看官网上的示例组件，你可以在左侧导航栏中切换想要查看的组件，然后通过右侧的快速前往在不同Demo之间切换。

如果你准备添加 Vue DevUI，请前往快速开始文档，只需要几行代码。

如果你对我们的开源项目感兴趣，并希望参与共建，欢迎加入我们的开源社区，关注DevUI微信公众号：DevUI 。

文 / DevUI社区贡献者何宇峰

还不会写正则表达式，超详细教程（一）

前言