开题

我们常常有正则的各种需求,普通的正则匹配符虽然够用,但是满足不了我们一些很奇怪的需求,所以我们需要更多的关于正则的知识点。

需求

比如我们有一个这样的需求,匹配出字符串里的第一个div标签:aa<div>test1</div>bb<div>test2</div>cc

有这样一个表达式,它的匹配结果是:

`aa<div>test1</div>bb<div>test2</div>cc `.match(/<div>.*<\/div>/)  //<div>test1</div>bb<div>test2</div>

还有这样一个表达式,它的匹配:

`aa<div>test1</div>bb<div>test2</div>cc `.match(/<div>.*?<\/div>/)  //<div>test1</div>

区别只是第二个匹配多加了个?号。竟有如此操作。

正则贪婪匹配和非贪婪匹配

概念

贪婪与非贪婪模式影响的是被量词修饰的子表达式的匹配行为,贪婪模式在整个表达式匹配成功的前提下,尽可能多的匹配,而非贪婪模式在整个表达式匹配成功的前提下,尽可能少的匹配。非贪婪模式只被部分NFA引擎所支持。

例如

除了第一个例子,我们再举个例子。最简单的比如

`aaaaaa`.match(/\w+/)  //aaaaaa
`aaaaaa`.match(/\w+?/) //a

非贪婪模式的语法

js的正则引擎包括现在大部分的高级语言的正则引擎都是NFA,默认贪婪匹配的,js的匹配符都是贪婪匹配的匹配符也叫匹配优先量词,比如“{m,n}”、“{m,}”、“?”、“*”和“+”。

非贪婪模式的匹配符也叫忽略优先量词,比如“{m,n}?”、“{m,}?”、“??”、“*?”和“+?”。 就是在贪婪量词后面加?号

非贪婪模式的应用

并没有特殊的应用范围,因为正则是需要各种匹配符配合的。

贪婪模式和贪婪模式的性能

非贪婪模式的性能要高一点的,是因为贪婪模式可能会遇到更多的回溯。

NFA的回溯

谈到回溯,其实就是正则的匹配原理了。例子说话:

`love`.match(/l(ovv|asd|ove)/)  //love

那么js是如何对这段正则进行匹配的呢

  • 首先控制权交给l,匹配l,成功。
  • 匹配第一个分支,ovv,o匹配成功,继续匹配v匹配成功,e匹配失败,这时回溯,返回第一次成功的匹配l,并且废弃掉此分支。
  • 匹配第二个分支,a,匹配失败,回溯,废弃掉此分支。
  • 匹配第三分支ove,连续匹配都能成功,返回love。

回溯的原理:

记录所有可能的表达式分支,尝试匹配,若失败则返回,选择上次正确标记处按新的表达式(备用状态)开始新的尝试匹配。

回溯就是当正则匹配失败退回成功的匹配。因为js默认是贪婪匹配的,所以如果我们匹配这样一个字符串aaaaaaaaab,表达式为/a+c/。流程是怎样的呢?

因为贪婪,我们会先匹配全部的a,然后匹配c字符串,匹配失败,这是回溯,吐出一个a来,再匹配c,仍然失败,会再吐出一个a再匹配c,如此往复的回溯,直到剩下最后一个a,再匹配c失败,我们宣布匹配失败。这时已经做了n多次的回溯。所以刚才说贪婪匹配的性能可能是更低的,但也不是绝对的,要取决于你的正则是如何书写的。好的正则需要更少的回溯,会有更好的性能。

正则的捕获和非捕获

捕获和非捕获和下面要讲的环视都是NFA引擎区别与DFA引擎的重要部分。捕获的表达式很简单,就是(exp),非捕获的表达式是(?:exp)。捕获的作用就是会捕获括号里的内容,把它放到RegExp.$1 -$9 之中,非捕获的话就是我匹配这个表达式,但是我不把它放到返回中。

比如:

`email:xiaoming@toutiao.com`.match(/:(\w+)@/)  //[":xiaoming@", "xiaoming", index: 5, input: "email:xiaoming@toutiao.com"]

match函数的第一个返回是全文的匹配,第二个返回是RegExp.$n,即捕获的匹配,我们这样写就很容易获取到xiaoming这个用户名,如果我们写为

`email:xiaoming@toutiao.com`.match(/:(?:\w+)@/)  //[":xiaoming@", index: 5, input: "email:xiaoming@toutiao.com"]

是非捕获但匹配,就是相当于/:\w+@/。它有什么用呢?可以把一个东西作为一个整体,比如你可以写/\w{2}/你不能写/\w{2}+/,你可以写做/(?:\w{2})+/。

正则表达式的环视

最后说一下正则最难的环视。也有文章叫预搜索。

  • 环视只进行子表达式的匹配,不占有字符,匹配到的内容不保存到最终的匹配结果,是零宽度的。环视匹配的最终结果就是一个位置。
  • 环视的作用相当于对所在位置加了一个附加条件,只有满足这个条件,环视子表达式才能匹配成功。
  • js只支持顺序环视,包括顺序肯定环视和顺序否定环视。

顺序肯定环视

表达式为:(?= exp)。表达式的右侧需要满足exp,才能成功匹配。比如

var con="coming soon,going gogogo"
var reg = /\b[\w]+(?=ing\b)/g; //["com", "go"]
console.log(con.match(reg));

\w+需要满足的条件是(ing\b),顺序肯定环视的表达式满足,才可以匹配。意思就是相当于匹配后面带ing的单词。

`a12`.match(/^(?=[a-z])[a-z0-9]+$/)    //a12

这个匹配是如何进行的呢?

首先^匹配位置0,a字母匹配成功,然后进入顺序肯定环视,它和表达式的匹配是不互斥的,它也匹配的a,a匹配成功,进入表达式,匹配a,匹配1,2都成功,$匹配成功,返回a12。

^匹配"",[a-z0-9]匹配”a12“,$匹配“”。

/(?=.*?\d)/.test(`asdasdads`)  //匹配字符必须有数字

`<a class='a'>>>asdasdw我啊啊售出<<<<</a>`.match(/(?:<a.*?>)(.*?)(?=<\/a>)/)
// ["<a class='a'>>>asdasdw我啊啊售出<<<<", ">>asdasdw我啊啊售出<<<<", index: 0, input: "<a class='a'>>>asdasdw我啊啊售出<<<<</a>"]

顺序否定环视

表达式为:(?!exp)。相当于在当前位置左侧附加一个条件。如果满足了exp则顺序否定环视宣布匹配失败,如果不满足exp,顺序否定环视宣布匹配成功,再进行下面的匹配。

比如

`1111a112`.match(/^(?![\d]+$)/g) //匹配字符不能全是数字

最后一道题

给金钱数额加千分制的区分,比如1,234,567,890。

`1234567890`.match(/\d{1,3}(?=(\d{3})+$)/g)

\d首先贪婪匹配123,成功,进入顺序肯定环视,456,789匹配成功,控制权交到$匹配789,匹配失败,回溯

\d匹配12,成功,进入顺序肯定环视,345,678匹配成功,控制权交到$匹配678,匹配失败,回溯

\d匹配1,成功,进入顺序肯定环视,234,567,890,控制权交到$匹配890,匹配成功.

\d贪婪匹配234,成功,进入顺序肯定环视,567,890匹配成功,控制权交到$匹配890,匹配成功

\d贪婪匹配567,成功,进入顺序肯定环视,890匹配成功,控制权交到$匹配890,匹配成功

\d贪婪匹配890,成功,进入顺序肯定环视,匹配空字符串匹配失败,匹配失败。

\d匹配89,\d匹配8在顺序肯定环视里都会失败,于是返回。

文档匹配1,234,567

深入js正则的更多相关文章

  1. js正则

    JS正则 test:判断字符串是否符合规定的正则 rep = /\d+/; rep.test("asdfoiklfasdf89asdfasdf") # true rep = /^\ ...

  2. js正则匹配的一个日常应用

    应用实例 1 /** 将段落中的 \n 转换为 <p></p>, 规范存储 */ 2 function formatParagraphForStore(val) { 3 var ...

  3. jS正则和WEB框架Django的入门

    JS正则 -test 判断字符串是否符合规定的正则表达式 -exec 获取匹配的数据 test的例子: 从上述的例子我们可以看出,如果rep.test匹配到了就返回true,否则返回false exe ...

  4. js正则实现二代身份证号码验证详解

    js正则实现二代身份证号码验证详解 根据[中华人民共和国国家标准 GB 11643-1999]中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成.排列顺序从左至 ...

  5. js 正则 以字母开头必须有 大小写字母数字组成 可以有“@"或 ”.“

    js  正则  以字母开头必须有 大小写字母数字组成 可以有“@"或 ”.“ var reg = /^[a-zA-Z]{1}(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d_@ ...

  6. 手机号码js正则验证

    手机号码js正则验证 var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; if (!myreg.test($(" ...

  7. js正则标志/g /i /m的用法,以及实例

    js正则标志/g /i /m的用法,以及实例   正则的思想都是一样的,但是具体的写法会有所不同,在这里提到的/g,/i,/m在其他的地方也许就不能用了. 一,js正则标志/g,/i,/m说明 1,/ ...

  8. 记录一下JS正则的坑

    JS正则的单行模式有点问题 总之 . 符号匹配换行符号会有问题 暂时的解决方案是 html = html.replace(/[\r\n]/g,""); 附加一个 html = ht ...

  9. 奇怪的JS正则之 /[A-z]/.test("\\"); // true

    本文是在一个国外介绍JS的网站上转载过来的,作者很逗,先是举例JS让人XX的例子,再动手实践发现JS隐藏的黑知识.为什么 /[A-z]/.test("\\"); 是 true ,你 ...

  10. 撸一个JS正则小工具

    写完正则在浏览器上检测自己写得对不对实在是不方便,于是就撸了一个JS正则小demo出来. demo demo展示 项目地址 代码部分 首先把布局样式先写好. <!DOCTYPE html> ...

随机推荐

  1. uwsgi常用配置

    一.安装方式 1.wget 可以去官网:https://pypi.python.org/pypi/uWSGI/ 下载对应的版本   tar -xvf uwsgi-2.13.1.tar.gz cd uw ...

  2. webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  3. python初识-day3

    1.字符串常用操作(较多,用代码加注释表示) name = '\tMy name is congcong' print(name.capitalize())#输出结果为 My name is cong ...

  4. mysql主从配置主主配置

    一.     概述  MySQL从3.23.15版本以后提供数据库复制(replication)功能,利用该功能可以实现两个数据库同步.主从模式.互相备份模式的功能.本文档主要阐述了如何在linux系 ...

  5. git clone代码时候出现的报错

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "Andale Mono"; color: #28fe14; backgr ...

  6. 理解Object.defineProperty的作用

    对象是由多个名/值对组成的无序的集合.对象中每个属性对应任意类型的值.定义对象可以使用构造函数或字面量的形式: var obj = new Object; //obj = {} obj.name = ...

  7. EL表达式和JSTL核心标签库

    1 EL表达式 1.1 EL的概述 EL,全名为Expression Language. 主要作用: ①EL表达式主要用于替换jsp页面中的脚本表达式,以便于从各种类型的web域中检索java对象(某 ...

  8. 珍爱生命,远离JS=>JS避坑记

    JavaScript避坑记 转载请注明源地址: http://www.cnblogs.com/funnyzpc/p/8407952.html 上图=> 有意思的漫画,不知大家看懂了没,这里我想说 ...

  9. MVC登出友情提示

    好奇心害死猫,话说12月30号,阳历17年末,行至小镇农户,有羊在鸣,由于好奇心泛滥,循声而至,发现一只被拴住的羊,好心喂草,不料反被舔了一口,得亏抽手及时,不然小拇指估计被咬掉,没错,是咬掉,即使如 ...

  10. The mkdir Command

    The mkdir command is is used to create new directories. A directory, referred to as a folder in some ...