资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/深入浅出，手把手教你编写正则表达式

深入浅出，手把手教你编写正则表达式

bitkylin / 2858人阅读

摘要：日常代码的开发中，大家都或多或少的碰到一些正则表达式，但有的朋友只是会用，或者大致明白，希望这篇对正则深入浅出的文章能够让大家有所收获。主要可以干的事情有两个，引用和反向引用，在一些稍微复杂的正则表达式里，我们常常会用到这些。

日常代码的开发中，大家都或多或少的碰到一些正则表达式，但有的朋友只是会用，或者大致明白，希望这篇对正则深入浅出的文章能够让大家有所收获。
基本语法 
[xyz]     一个字符集，匹配任意一个包含的字符
[^xyz]    一个否定字符集，匹配任何为包含的字符
w (小写) 匹配字母或数字或者下划线的字符
W (大写) 匹配不是字母，数字，下划线的字符
s (小写) 匹配任意空白符
S (大写) 匹配不是空白符的字符
d (小写) 匹配数字
D (大写) 匹配非数字的字符
 (小写) 匹配单词的开始或结束的位置
B (大写) 匹配不是单词开头或结束的位置
 $        匹配字符串的结束
 ^        匹配字符串的开始
 .        匹配所有，除了换行符
 -        重复0次或更多次
 -        重复1次或更多次
 ?        重复0次或一次
 {n}      重复n次
 {n,}     重复n次或更多次
 {n, m}   重复n次到m次
等更多.........

更多语法可以在W3C正则里查看

匹配位置

需要强调一下匹配位置的几个语法, 后面会一一举例说明
^ 匹配字符串的开始
$ 匹配字符串的结尾
(?=pattern) 正向前瞻，字符串匹配满足条件的位置
(?!pattern) 负向前瞻，字符串匹配满足条件的位置

常用方法和属性

正则表达式的写法有两种

var reg = new RegExp("/1/")
var reg = /1/

reg是正则对象的实例，通过console.dir打印对象，我们能看到实例上面的属性和方法。

常用的方法

举个简单的例子，我们来了解下test()和exec()的区别和使用场景。

var reg = /1/, reg1 = /(1)/
reg.test(1111) // true
reg.test(222) // false
reg.exec(11112) // ["1", index: 0, input: "11112"]
reg1.exec(11112) // ["1111", "1", index: 0, input: "11112"]
reg1.exec(222) // null

test验证后会返回一个布尔值，主要用于验证是否匹配，exec则在验证成功后返回一个类似数组的对象，主要用于捕获分组，失败则返回null。

reg1是一个匹配(1)分组的正则，使用exec匹配成功后返回["1111", "1", index: 0, input: "11112"]，input是输入的值，第一项是匹配满足条件的数据，第二项是匹配到的分组，如果没有分组，第二项则不存在,index属性则表示从第几项开始匹配到。
关于分组的话在下面会有详细的例子说明。

常用的属性

 ignoreCase 忽略大小写，默认为false
 global     全局匹配，默认为false
 multiline  在有换行的时候，可以得到换行的起始位置和终止位置，默认为false
匹配规则

正则表达式(regular expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等

当当看描述和说明文档可能有点太官方化了，先假设我们已经都了解了正则匹配的基本语法和大致的使用，接下来这里用简浅的例子一步一步来分析怎样去实现自己需要的正则表达式。

例子： 手机号码

首先举个例子，要匹配一个手机号码。先分析一下手机号码有什么样的规则呢，1开头，必须为数字，而且总共长度为十一位，那我们就有了下面这个表达式：

var reg = /^1[0-9]{10}$/ // 根据正则语法 ^为匹配开始，^1就表示第一位必须为1开头，[0-9]指的是必须为0-9的数字，{10}表示重复次数为10，$结束符。简单的匹配规则完成。

好像有点粗糙，一般手机号码第二位是不会有0-9这么多的可能的，所以我们需要在优化一下，第一位为1，第二位为[3,5,8,7]：

var reg = /^1[3,5,8,7]{1}[0-9]{9}$/ // 根据正则语法 ^为匹配开始，^1就表示第一位必须为1开头，[3,5,8,7]指的是匹配其中任一数字，{1}表示重复次数为1，前两位匹配完成，加上后面的[0-9],{9}重复九次，$结束符。简单的匹配规则完成。

这样，基本的一个手机号码的正则匹配规则就出来了，如果自己业务有需求，做相对应的改动就可以了。

例子：邮箱

和手机号码的规则相比较，邮箱的匹配规则稍微复杂一点。同样，我们先分析邮箱的规则，比如QQ邮箱，110@qq.com，先有字符，长度大于1，然后是@，后面再跟着一串字符长度大于1，那我们就可以得到这样一个的表达式：

var reg = /^[w.]+@[w.]+$/ // [w.] w匹配字母或数字或者下划线的字符，.通过转义符表示匹配.,+表示重复一次或更多次，匹配@符号，然后又是同样的w.匹配一次或更多次。

例子：网站

同样是分析网站规则，http(s)://segmentfault.com/1233, 首先可能是http协议或者https协议，然后是://，然后是字符串。这样一分析，再把对应的正则语法理一理，很快一个匹配规则就出来了：

var reg = /^https?://.+$/ // 首先会是http开头，^http, 然后s跟随?表示匹配0次或一次，:,//需要用转义，后面跟随各种类型的不确定因素.+，当然，如果我们要做的更精确的匹配，则可以修改成自己的规则即可。

举了几个基本的例子，让我们去复习巩固正则的基本使用和匹配规则，首先分析要匹配的规则是什么，然后一步一步去把规则拼积木一样拼进去，就可以了，自己多定义一些不一样的规则然后去一个一个实现，就会发现如果只是基本的使用，远没有想象中的难。

分组

分组的就是把要匹配的规则分成一个组，写在()里，比如匹配数字(0-9)，匹配字母(0-z),主要有分为捕获型分组和非捕获型分组。

捕获型分组

先来说说捕获型分组。主要可以干的事情有两个，引用和反向引用，在一些稍微复杂的正则表达式里，我们常常会用到这些。

捕获型分组-引用

在每次分组捕获之后，RegExp对象上面可以拿到最近捕获到的分组，下面来举一些例子：

var reg = /(1)(3)/ // 两个分组
reg.exec(123134) // 捕获到了两个分组
console.log(RegExp.$1) // 1
console.log(RegExp.$2) // 3

得到到了最近捕获的分组，可是往往我们不明白捕获到了分组有什么用，下面举个例子,将所有的html标签替换成p标签，来说明捕获到的分组怎么去引用。
首先我们分析一下这个匹配的规则，开始标签为<字符串>，结束标签为，我们只需要把这些替换为

就可以了。

var str = "1234
456
"
var reg = /<(/?)(w+)>/g  // 先匹配<,然后(/?)重复0或一次，然后匹配w+,匹配>，结束。
str.replace(reg, "<$1p>")  // 字符串的替换方法,这里使用了$1，就是RegExp.$1，引用正则里面的分组(/?)，
                           // 所以<$1p>中的$1则为动态捕获到的分组。当标签为时，RegExp.$1为/,
                           // 字符串中用
替换原来标签，
                           // 则达到了将html字符串中开始标签和闭合标签全部替换的效果

捕获型分组-反向引用

反向引用也是一样将捕获到的分组引用，不过是在编写的正则里面，通过/1,/2,/3可以得到当前捕获到的分组.

非捕获型分组

(?:)即表示该分组不能被捕获，之后在引用的时候是引用不到这个分组的。

贪婪匹配和惰性匹配 正向前瞻和负向前瞻
服务器托管 私有云 手把手教你做图像识别 手把手教你阿里云服务器搭建商城 正则正则表达式 正则匹配正则表达式

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

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

相关文章

  • 深入浅出，手把手教你编写正则表达式

    摘要：日常代码的开发中，大家都或多或少的碰到一些正则表达式，但有的朋友只是会用，或者大致明白，希望这篇对正则深入浅出的文章能够让大家有所收获。主要可以干的事情有两个，引用和反向引用，在一些稍微复杂的正则表达式里，我们常常会用到这些。 日常代码的开发中，大家都或多或少的碰到一些正则表达式，但有的朋友只是会用，或者大致明白，希望这篇对正则深入浅出的文章能够让大家有所收获。 基本语法 [xyz] ...

    andot 评论0 收藏0

  • 深入浅出，手把手教你编写正则表达式

    摘要：日常代码的开发中，大家都或多或少的碰到一些正则表达式，但有的朋友只是会用，或者大致明白，希望这篇对正则深入浅出的文章能够让大家有所收获。主要可以干的事情有两个，引用和反向引用，在一些稍微复杂的正则表达式里，我们常常会用到这些。 日常代码的开发中，大家都或多或少的碰到一些正则表达式，但有的朋友只是会用，或者大致明白，希望这篇对正则深入浅出的文章能够让大家有所收获。 基本语法 [xyz] ...

    Jackwoo 评论0 收藏0

  • 只有20行Javascript代码！手把手教你写一个页面模板引擎

    摘要：整个引擎实现只有不到行代码。不知道你有木有听说过一个基于的页面预处理器，叫做。最初我只是打算写一个的预处理器，不过后来扩展到了和，可以用来把代码转成和代码。最后一个改进可以使我们的模板引擎更为强大。 导读：AbsurdJS 作者写的一篇教程，一步步教你怎样用 Javascript 实现一个纯客户端的模板引擎。整个引擎实现只有不到 20 行代码。如果你能从头看到尾的话，还能有不少收获的。...

    Luosunce 评论0 收藏0

  • PHP小知识点

    摘要：那些琐碎的知识点作者记录的的很奇特很难记的知识点。易错知识点整理注意和的区别中和都是输出的作用，但是两者之间还是有细微的差别。今天手头不忙，总结一下，分享过程中掌握的知识点。 深入理解 PHP 之：Nginx 与 FPM 的工作机制 这篇文章从 Nginx 与 FPM 的工作机制出发，探讨配置背后的原理，让我们真正理解 Nginx 与 PHP 是如何协同工作的。 PHP 那些琐碎的知识...

    hover_lew 评论0 收藏0

  • 深入理解js

    摘要：详解十大常用设计模式力荐深度好文深入理解大设计模式收集各种疑难杂症的问题集锦关于，工作和学习过程中遇到过许多问题，也解答过许多别人的问题。介绍了的内存管理。 延迟加载 (Lazyload) 三种实现方式 延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。本文详细介绍了三种延迟加载的实现方式。 详解 Javascript十大常用设计模式 力荐~ ...

    caikeal 评论0 收藏0

发表评论

登陆后可评论

0条评论

bitkylin

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<