技术分享｜关于正则表达式，你了解多少？

不念不忘少年蓝@ 2023-01-13 04:02 133阅读 0赞

### 关于正则表达式，你了解多少？ ###

*   *  一、什么是正则表达式
     *  二、JavaScript正则表达式
     *  三、修饰符和括号
     *  四、正则表达式模式
     *  五、RegExp对象
     *  七、HTML+CSS+JS免费实战学习
     *   *   *  大前端开发工程师入门实战——HTML+CSS+JS免费学习
             *  免费学习地址：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuMDAwMDc_size_16_color_FFFFFF_t_70_pic_center]  
字符串是编程时涉及到的最多的一种数据结构，对字符串进行操作的需求几乎无处不在。比如判断一个字符串是否是合法的Email地址，虽然可以编程提取前后的子串，再分别判断是否是单词和域名，但这样做不但麻烦，而且代码难以复用。  
正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则，凡是符合规则的字符串，我们就认为它“匹配”了，否则，该字符串就是不合法的。同时它也是独立于编程语言的一个学科，Javascriot提供了对于正则支持，此外，像Java、c、python也都支持正则。  
本篇文章，我们将分享关于JavaScript的正则表达式，带你进入正则的世界！

## 一、什么是正则表达式 ##

> “正则表达式（Regular Expression）是用于描述一组字符串特征的模式，用来匹配特定的字符串。通过特殊字符+普通字符来进行模式描述，从而达到文本匹配的工具。“

![在这里插入图片描述][20210415152855522.jpg_pic_center]  
正则表达式可以是单个字符，也可以是更复杂的模式。它可以用于任何类型的文本搜索和文本替换操作。例如：

1.  **验证**：表单提交时，进行用户名密码的验证。
2.  **查找**：从大量信息中快速提取指定内容，在一批url中，查找指定url。
3.  **替换**：将指定格式的文本进行正则匹配查找，找到之后进行特定替换。

## 二、JavaScript正则表达式 ##

在JavaScript中，正则表达式是一个描述字符模式的对象。在JavaScript的RegExp类中包含了正则表达式和针对字符串及正则所定义的方法。可以实现对文本执行模式匹配以及搜索和替换的功能。  
语法：

//使用RegExp()构造函数将正则表达式定义为：
    var pattern = new RegExp(pattern, modifiers);
    //或更简单的方法
    var pattern = /pattern/mottributes;

*  Pattern（模式） ——描述了一个表达式模型；
 *  Modifiers（修饰符）——描述了检索是否是全局，区分大小写等；

## 三、修饰符和括号 ##

1.  修饰符：用于执行不区分大小写和全局搜索。

![修饰符][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuMDAwMDc_size_16_color_FFFFFF_t_70_pic_center 1]  
让我们来看一个例子，看看如何在JavaScript中使用这些修饰符。  
*g修饰符：*

let str = "This is the example";
    let pattern = /is/g;`在这里插入代码片`

*输出结果为：*

is,is

*i修饰符：*

let str = "Hello World";
    let pattern = /hello/i;

*输出结果为*：

Hello

*m修饰符：*

var str = "\nthe dog ran after \nthe cat";
    var patt1 = /^the/m;

*输出结果为：*

the

1.  括号：用于查找一定范围的字符串

![括号][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuMDAwMDc_size_16_color_FFFFFF_t_70_pic_center 2]  
*例子：*

var str = "Is this all there is? 123456";
    var ex1 = /[h]/g;    //[abc]
    var ex2 = /[1-4]/g;      //[0-9]
    var ex3 = /[this|there]/g;     //[x|y]

*输出结果为：*

h,h
    1,2,3,4
    this,there

## 四、正则表达式模式 ##

1.  元字符：是具有特殊含义的字符

![元字符][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuMDAwMDc_size_16_color_FFFFFF_t_70_pic_center 3]

有了元字符之后，我们就可以利用这些元字符来写一些简单的正则表达式了，

***匹配有abc开头的字符串：***

\babc或者^abc

***匹配8位数字的QQ号码：***

^\d\d\d\d\d\d\d\d$

***匹配1开头11位数字的手机号码：***

^1\d\d\d\d\d\d\d\d\d\d$

1.  定义量词：

![量词][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuMDAwMDc_size_16_color_FFFFFF_t_70_pic_center 4]  
*例如：*

var str = "Hello, welcome to msonline! 1 12 123";
    var quant1 = /e+/g;
    var quant2 = /el*/g;
    var quant3 = /1?/g;

*结果：*

e,e,e,e
    ell,el,e,e
    ,,,,,,,,,,,,,,,,,,,,,,,,,,,,1,,1,,,1,,,

## 五、RegExp对象 ##

在 JavaScript 中，RegExp 对象是带有预定义属性和方法的正则表达式对象。

1.  使用test（）  
    test() 是一个正则表达式方法。  
    它通过模式来搜索字符串，然后根据结果返回true或false。  
    下面的例子搜索字符串中的字符“e”：

var patt = /e/.test("The best things in life are free!");

*输出结果：*

true

1.  使用exec()  
    exec() 方法是一个正则表达式方法。  
    它通过指定的模式搜索字符串，并返回已找到的文本。  
    如果未找到匹配，返回null。  
    下面的例子搜索字符串中的字符“e”：

/e/.exec("The best things in life are free!");

*输出结果：*

--------------------

了解完以上内容以后，那么你已经掌握了正则的基础语法，但是！！！  
关于正则表达式的内容，远不止此。  
你知道正则引擎吗？它有什么样的特征？  
你了解零宽断言吗？  
正向先行断言、正向后行断言；  
负向先行断言、负向后行断言；  
是不是听的一脸懵逼？？？  
还有捕获和非捕获，贪婪匹配和懒惰匹配，反向引用和回溯…

其实关于正则的进阶部分，还有很多很多知识内容需要你去学习和掌握，后续我们将继续更新，敬请关注！

## 七、HTML+CSS+JS免费实战学习 ##

> 你是否也想成为一名专业的web开发人员？福利来啦～

#### 大前端开发工程师入门实战——HTML+CSS+JS免费学习 ####

*  20+HTML&CSS实战项目，免费学习+项目源码，
 *  部分效果演示  
    ![HTML+CSS免费实战教学][HTML_CSS]
 *  10+原生Javascript实战项目，助你彻底攻克JS
 *  项目效果演示

![原生JS免费实战教学][JS]

*  HTML+CSS还原京东商城
 *  项目效果演示  
    ![HTML5+CSS3还原京东商城][HTML5_CSS3]

--------------------

#### 免费学习地址： ####

[前端HTML+CSS实战项目全集（免费学习&提供课程代码）][HTML_CSS 1]  
[原生JS入门实战合集（免费学习&提供课程代码）][JS 1]  
[HTML5+CSS3还原京东商城][HTML5_CSS3 1]

--------------------

想了解更多大前端技术及实战，可扫码关注微信公众号！

![微信公众号][20210415160558554.jpg_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuMDAwMDc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/ffa656cccf254deeab33886dd130ae52.png
[20210415152855522.jpg_pic_center]: /images/20221022/cdf1858218fa42ddb9e8967fafaf5e85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuMDAwMDc_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/9004ff9e0f3344779d24b8b5c635ec8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuMDAwMDc_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221022/1d0eb381fb3040d2a1df59d5cfbd430b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuMDAwMDc_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221022/43debcc470324f2fb91eb11c9a76928d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuMDAwMDc_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221022/16b990a3d82e4517956e93804a8752bd.png
[HTML_CSS]: /images/20221022/0d9364bb9b6940f2ad147b6d7bc64b25.png
[JS]: /images/20221022/1687b3e51b4243d584ed2335211b5fd5.png
[HTML5_CSS3]: /images/20221022/a8dc65ad50324690ab1db7ebbfff67a1.png
[HTML_CSS 1]: https://www.bilibili.com/video/BV1Yr4y1P7hS
[JS 1]: https://www.bilibili.com/video/BV1Gy4y1Y7jZ
[HTML5_CSS3 1]: https://www.bilibili.com/video/BV1Ny4y1b7ss
[20210415160558554.jpg_pic_center]: /images/20221022/2dbd98703d7b4432b11a133751f2fc7b.png