正则系列——JavaScript正则表达式基础语法巩固篇

phodal 发布于2019-08-22 11:09 / 2232人阅读

摘要：基础语法巩固正则表达式引擎根据正则去匹配字符的时候，是通过检查索引的方式。妻原配就是好，可以直接使用正则表达式调用它。下面解释一下上面这些常用的元字符查找单个字符，除了换行和行结束符。正则系列文章整理到了

上一章内容：正则表达式实战篇

知识回顾

前2章分别学习了正则表达式入门技巧，以及遇到正则需求该如何去分析问题，还有正则表达式实战的一些场景解释。

这一章内容偏向理论，推荐你点击开头的链接前往前2章节学习一下入门技巧，然后再看这一章内容，就不会那么迷茫了。我一向相信工程师要先学会做事，才能学懂理论，先学理论，再学做事的通常是纸上谈兵，一遇到实战就懵逼。

基础语法巩固

正则表达式引擎根据正则去匹配字符的时候，是通过检查索引的方式。

RegExp构造函数

JavaScript正则表达式有2种写法：比较常用的是第二种，第一种写法在一些replace替换时涉及到变量的时候，可能会用到，后面例子如果有这个需求，再说。

1、RegExp
下面其实是同一种写法，一个用 "正则"，一个是用 /正则/，注意使用字符串写法的时候，特殊字符要进行转义。

var r = new RegExp("d+", "g") //r.test("123") true
//或者是
var r = new RegExp(/d+/, "g")  //r.test("123") true

如果你没有转义特殊字符，那么正则就是错的，比如：

//我错了
var r = new RegExp("d+", "g") //r.test("123") false

2、/正则/
你还可以直接使用 /正则/ 的写法。

/d+/g.test("123") // true

和RegExp有关的几个方法，compile()、exec()、test()，与之相对于的是search()、match()、replace()、split()，为了好记，我把她们叫做 “3妻4妾”。

3妻是RegExp的原配方法，4妾是字符串方法。

1、3妻
原配就是好，可以直接使用正则表达式调用它。

var r = /2/
r.compile(r) //重新编译正则，这个不太常用
r.exec("123") //获取正则匹配的字符所在的位置
r.test("123") //最受欢迎的妻子，判断字符串是否符合某个正则，true 或者 false

2、4妾
4妾不是RegExp的方法，而是字符串的方法。在控制台输入 "".__proto__ ，就能看到字符串原型中的这4个方法，又因为她们都和正则有关，所以叫做RegExp的4个小妾。

var r = /2/
"123".search(r) //返回匹配字符的位置，范围是0-n，如果不存在，则返回-1。
"123".match(r) //返回数组，这个方法常用在提取字符串中的某些字符。
"123".replace(r, "4") //最基本的用法是替换正则匹配到的字符串，还有一种高级用法，后面再讲。
"123".split(r) //表示切割字符串，这里把2切割出来，"123"变成了["1", "3"].
//通常我们用它来切割字符串里面的空格或者回车符，然后再map渲染。
"1 2
3".split(/[s
]/g).map(v => v) //["1", "2", "3"].map()

修饰符

JavaScript中常用的修饰符有3种，i、g、m，g你可能经常看得到。

"Aasb".match(/a/i) //i表示忽略大小写，匹配出来的是第一个A
"Aasb".match(/a/ig) //想要匹配所有的a，就需要加上g全局搜索 ["A", "a"]
m: 多行匹配，具体用法不了解

元字符

“元”的含义是元始天尊，“元字符”是元始天尊制造的一个个基础符文，用这些基础符文可以组合出各种高级的正则表达式。

.：查找单个字符，除了换行和行结束符。
w：查找字母和数字。
d：查找数字。
D：查找非数字字符。
s：查找空白字符。
S：查找非空白字符。
：匹配单词边界。
B：匹配非单词边界。

：查找换行符。
f：查找换页符。

：查找回车符。
	：查找制表符。
v：查找垂直制表符。

下面解释一下上面这些常用的元字符

查找单个字符，除了换行和行结束符。
换行符你可能知道，但是结束符是什么？在一个字符串最后，你肉眼看不到的地方，有一个结束符号，在101网站使用 /.*/ 测试一下就能看到了

"第一段
第二段".match(/./g) //["第", "一", "段", "第", "二", "段"]

//使用.+之后，匹配出来的效果就和split切割一样了。
"第一段
第二段".match(/.+/g) //["第一段", "第二段"]

查找字母和数字

"aA1".match(/w/g) // ["a", "A", "1"]
"aA1".match(/w+/g) // ["aA1"]

其他字符自己去101网站测试玩一下，很有趣的。

括号内的正则

我们经常看得到 []、()、{}这几种括号穿插在正则表达式中，让人眼花缭乱。但它的本质非常简单，很好理解。你需要注意 [^abc]中的 ^ 和写在/^abc$/的作用是不同的。

[abc]：查找方括号之间的任何字符。
[^abc]：查找任何不在方括号之间的字符。
[0-9]：查找任何从 0 至 9 的数字。
([0-9]|d)：查找任何指定的选项。
[0-9]{1}：查找一次数字。

看几个实例

实例1：

实例2：

实例3：

实例4：

量词

量词的意思是次数，前面我们已经使用到了一些量词符号，比如 +、 ?、 *、 {n, m}、 ^x$、最后还有零宽断言 ?=n、?!n

n+：匹配任何包含至少一个 n 的字符串。
n*：匹配任何包含零个或多个 n 的字符串。
n?：匹配任何包含零个或一个 n 的字符串。
n{X}：匹配包含 X 个 n 的序列的字符串。
n{X,}：X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。
n{X,Y}：X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。
n{X,}：匹配包含至少 X 个 n 的序列的字符串。
n$：匹配任何结尾为 n 的字符串。
^n：匹配任何开头为 n 的字符串。
?=n：匹配任何其后紧接指定字符串 n 的字符串。
?!n：匹配任何其后没有紧接指定字符串 n 的字符串。

这一段内容没法用文字描述清楚，请自行在 https://regex101.com 测试吧，只有实践才能理解理论。当你练习的次数足够多了，之后，你会发现这些量词都不用刻意记住，凭着感觉就能随手写出来了。

总结

正则表达式理论知识点很多，这一章内容阅读起来像读天书，最重要的还是找到感觉，就像你第一次学习react、vue、angular的时候，完全找不到方向，慢慢的，写多了，突然有感觉了。正则还好，没有太多复杂的概念，就是符号多了点，常用的记住就行了。复杂的符号还是网上搜索吧，比如中文字符的正则，我真的记不住。。。

正则系列文章整理到了github：https://github.com/hyy1115/Re...

云服务器 idc机房托管 js正则表达式语法正则表达式基础正则正则表达式正则匹配正则表达式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91877.html

正则系列——JavaScript正则表达式基础语法巩固篇

摘要：基础语法巩固正则表达式引擎根据正则去匹配字符的时候，是通过检查索引的方式。妻原配就是好，可以直接使用正则表达式调用它。下面解释一下上面这些常用的元字符查找单个字符，除了换行和行结束符。正则系列文章整理到了上一章内容：正则表达式实战篇知识回顾前2章分别学习了正则表达式入门技巧，以及遇到正则需求该如何去分析问题，还有正则表达式实战的一些场景解释。这一章内容偏向理论，推荐你点击开头的...

honhon 2019-08-05 12:03 评论0 收藏0
正则系列——正则虐我千百遍，我要反抗了

摘要：正则正则匹配的是零宽断言这一块我还没有完成掌握，它的大概意思是，获取某个字符或者某些字符前面的正则或者后面的正则。下一章正则表达式理论巩固篇正则系列文章整理到了如果你正则基础为0，请先看第一篇文章：JavaScript正则表达式入门心得实战篇上一章我分享了正则入门的一些体会以及注意事项。这一章开始挑一些常用的比较复杂一点的需求来练习一下。场景1：验证email是否合法邮箱种类...

lk20150415 2019-08-22 11:08 评论0 收藏0
正则系列——正则虐我千百遍，我要反抗了

摘要：正则正则匹配的是零宽断言这一块我还没有完成掌握，它的大概意思是，获取某个字符或者某些字符前面的正则或者后面的正则。下一章正则表达式理论巩固篇正则系列文章整理到了如果你正则基础为0，请先看第一篇文章：JavaScript正则表达式入门心得实战篇上一章我分享了正则入门的一些体会以及注意事项。这一章开始挑一些常用的比较复杂一点的需求来练习一下。场景1：验证email是否合法邮箱种类...

melody_lql 2019-08-05 12:04 评论0 收藏0
基础巩固：JavaScript基础总结(基本概念篇)

摘要：基础巩固基础总结使用已经好几年了，由于工作主要是做服务端开发，在工作中逐渐发现的使用范围原来越广泛。这里要注意，务必将基础部分掌握牢靠，磨刀不误砍柴功，只有将基础部分掌握并建立起系统的知识体系，在后面学习衍生的其他模式才能游刃有余。基础巩固：JavaScript基础总结使用JavaScript已经好几年了，由于工作主要是做服务端开发，在工作中逐渐发现JavaScript的使用范围原...

YuboonaZhang 2019-08-26 12:08 评论0 收藏0
2017-09-17 前端日报

摘要：前端日报精选面向初学者的高阶组件教程腾讯大会图文笔记第期如何在没有实际项目经验的情况下找到工作一篇包含了所有基本点的文章组件设计和分解思考中文常用命令嘿，前端丁香园开源接口管理系统个人文章基于的手机控制电脑实例掘金如何在上创建 2017-09-17 前端日报精选面向初学者的高阶组件教程腾讯IMweb Conf 2017大会图文笔记【第1059期】如何在没有实际项目经验的情况下找到工...

RichardXG 2019-08-22 11:09 评论0 收藏0