专栏首页ccylovehs浅析JavaScript正则表达式

浅析JavaScript正则表达式

1.正则表达式的定义

  正则表达式是一个描述字符模式的对象。JavaScript的RegExp类表示正则表达式,String和RegExp都定义了方法,后者使用正则表达式进行强大的模式匹配和文本检索与替换功能,JavaScript的正则表达式语法是Perl5的正则表达式语法的大型子集

1.直接量定义(perl风格,本人较习惯用直接量):var reg = /exp/attributes

  var pattern = /ccy$/;//匹配以ccy结尾的字符串;

注:同一段代码所表示的正则表达式每次运行时直接量会转换成不同的RegExp对象 2.RegExp对象定义(js风格):var reg = new RegExp(exp, attributes);

  var pattern = new RegExp("ccy$");;//匹配以ccy结尾的字符串;

2.直接量字符

  正则表达式中的所有字母和数字都是按照字面含义进行匹配的。JavaScript正则表达式语法也支持非字母的字符匹配,这些字符需要通过反斜杠作为前缀进行转义。

字母和数字字符

自身

\o

NUL字符

\t

制表符

\n

换行符

\v

垂直制表符

\f

换页符

\r

回车符

\xnn

由十六进制nn指定的拉丁字符

\uxxxx

由十六进制xxxx指定的Unicode字符

\cX

控制符^X

        demo:         /\n/.test('\nccy');//true        匹配    \nccy         /\n/.test('\\nccy');//false     不匹配    \ccy         /\n/.test('\\\nccy');//true        匹配    \\nccy

3.字符匹配

字符

匹配

[...]

方括号内的任意字符

[^...]

不在方括号内的任意字符

.

除换行符和其他Unicode行终止符之外的任意字符

\w

任何ASCII字符组成的单词,等价于[a-zA-Z0-9]

\W

任何非ASCII字符组成的单词,等价于[^a-zA-Z0-9]

\s

任何Unicode空白符

\S

任何非Unicode空白符

\d

任何ASCII数字,等价于[0-9]

\D

任何非ASCII数字,等价于[^0-9]

[\b]

退格直接量

demo:

/\w\w\d\d\d/.test('lt666');//true    匹配两个字母或者数字加三个数字的字符串

4.重复字符匹配

字符

匹配

{n,m}

前一项至少n次,但不超过m次

{n,}

前一项n次或者更多次

{n}

前一项n次

?

前一项0次或者1次,等价于{0,1}

0

前一项至少1次或者更多次,等价于{1,}

*

前一项0次或者更多次,等价于{0,}

demo:

/\d{4,9}/.test(1314);//true        匹配4到9个数字 //下面的例子稍微有点复杂,仔细分析也很简单 /\w{3}\s?\w{2,4}\s+javascript+\s+[^(]*/.test('ccy is javascript coder');//true        匹配3个字母或数字加0个或1个空格加2到4个字母或数字加至少1个空格加javascript加至少1个空格加0个或多个左反圆括号字符

重复匹配还种模式:非贪婪模式(尽可能的少匹配),只需在待匹配的字符后跟随一个?

??、+?、*?、{1,5}?

/\d{4,9}/.exec(131414131);//131414131 /\d{4,9}?/.exec(131414131);//1314 下面这种情况贪婪和非贪婪是一样的效果 /c+y/.exec('ccy');//ccy /c+?y/.exec('ccy');//ccy 这是因为正则表达式的模式匹配总是会寻找字符串中第一个可能匹配的位置

5.选择、分组和引用

javascript正则语法还包括指定选择项、子表达式分组和引用前一子表达式的特殊字符。

字符

含义

|

选择,匹配的是该符号左边的子表达式或者右边的子表达式

(…)

组合,将几个项组合为一个单元,这个单元可通过* + ? | 等符号加以修饰,而且记住和这个组合相匹配的字符串以供此后的引用使用

(?:...)

只组合,把项组合到一个单元,但不记忆与改组相匹配的字符

\n

和第n个分组第一次匹配的字符相匹配,组是圆括号中的子表达式(也可能是嵌套的),组索引是从左到右的左括号数,(?: 形式的分组不编码

1.选择

字符 | 用于分隔供选择的字符,选择项的尝试匹配是从左至右,直到发现了匹配项。

注:如果左边的选择项匹配就会忽略右边的匹配项,即使它产生更好的匹配

2.组合引用

正则表达式中的圆括号 () 有多中作用:

a.一个是把单独的项组合成子表达式;

b.一个是在完整的模式中定义子模式;

c.允许在同一正则表达式的后部引用前面的子表达式,引用的是实例而非匹配模式。

注:perl风格的\n,RegExp对象则$n,以左圆括号为子表达式索引,从1开始

'AA Am 99'.match(/(\w)\1/g);//["AA","99"]

/(A+)((B|C|D)+)(E+)/.exec('ABCDE');//["ABCDE","A","BCD","D","E"];

6.指定匹配位置

正则表达式中匹配位置是一个难点

锚字符与断言

字符

含义

^

匹配字符串的开头,在多行检索中匹配一行的开头

$

匹配字符串的结尾,在多行检索中匹配一行的结尾

\b

匹配一个单词的边界,就是位于\w与\W之间的位置

\b

匹配非单词边界的位置

(?=x)

零宽度正先行断言。仅当子表达式 X 在 此位置的右侧匹配时才继续匹配。例如,/w+(?=/d) 与后跟数字的单词匹配,而不与该数字匹配。此构造不会回溯。

(?!=x)

零宽度负先行断言。仅当子表达式 X 不在 此位置的右侧匹配时才继续匹配。例如,例如,/w+(?!/d) 与后不跟数字的单词匹配,而不与该数字匹配 。

(?<=X)

零宽度正后发断言。仅当子表达式 X 在 此位置的左侧匹配时才继续匹配。例如,(?<=19)99 与跟在 19 后面的 99 的实例匹配。此构造不会回溯。

(?<!X)

零宽度负后发断言。仅当子表达式 X 不在此位置的左侧匹配时才继续匹配。例如,(?<!19)99 与不跟在 19 后面的 99 的实例匹配

demo:

要匹配<title>javascript</title>中的javascript,此时用断言最合适

/(?<=<title>).*(?=<\/title>)/.exec('<title>javascript</title>');//javascript

(?<=<title>)零宽度正后发断言,断言<title>在当前位置左侧;

(?=<\/title>)零宽度正先行断言,断言</title>在当前位置的右侧,/ 需要加 \ 转义

细心体会一下

不用断言截取如下

'<title>javascript</title>'.match(/^<title>(.*)<\/title>$/)[1];//javascript

7.修饰符

字符

含义

I

不区分大小写

g

全局匹配

m

多行匹配模式

8.用于匹配模式的String方法

1.search(reg)

参数reg为正则表达式,返回第一个与之匹配的子串的起始位置,如找不到则返回-1 "javascript".search(/script/i); //4

注:search方法不支持全局检索,因为它会忽略正则表达式中的修饰符g 2.replace(reg,str)

用以执行检索与替换操作,注意出现$n则说明匹配子表达式 "javascript".replace(/javascript/gi,"JavaScript"); 3.match(reg)

返回一个由匹配结果组成的数组,如果reg中设置了修饰符g,则返回的数组包含字符串中的所有匹配结果,若没有g,就不会进行全局检索,只会检索第一个匹配。 "1 plus 2 equals 3".match(/\d+/g); 返回["1","2","3"] 4.split(param)

参数可以为字符串也可以为正则表达式 "1,2,3,4,5".split(/,/);返回["1","2","3","4","5"]

我们经常会匹配浏览器中cookie值

document.cookie="name=ccy;age=18";

/(^|;| )age=([^;]*)(;|$)/g.exec(document.cookie)[2];//18

9.RegExp对象

RegExp第一个参数包含正则表达式的主体部分,也就是直接量中两条斜线之间的文本,不论是字符串直接量还是正则表达式都使用 \ 字符作为转义字符的前缀, 因此当给RegExp()传入一个字符串表述正则表达式时,必须将 \ 替换成 \\ 第二个参数是可选的,只能传 g i m,或者它们的组合 var zipcode = new RegExp("\d{5}","g");

1.RegExp属性 source:是一个只读字符串,包含正则表达式的文本 global:是一个只读的布尔值,用以说明这个正则表达式是否带有修饰符g ignoreCase:是一个只读的布尔值,用以说明正则表达式是否带有修饰符i multiline:是一个只读的布尔值,用以说明正则表达式是否带有修饰符m lastIndex:是一个可读/写的整数,如果匹配模式带有g修饰符,这个属性存储在整个字符串的下一次检索的开始位置,会被exec(),test()方法用到

2.RegExp方法 exec() 执行字符串的匹配检索,类似String.match(),都会返回一个数组 test() 当调用exec方法返回不为null则调用test方法返回为true

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 正则表达式之javascript

    1.正则表达式的定义 描述字符模式的对象,JavaScript的RepExp类表示正则表达式

    Jack Chen
  • 2018年度总结

    2018年第一批00后步入成年人阵营,算算自己也老大不小了,离30只差两三年光阴,感慨时间如流水,一去不复返,校园嘻哈打闹的场景仿佛如昨日。

    Jack Chen
  • 前端异步技术之Promise

    由于是参(抄)考(袭)前辈的polyfill,自己编码测试时出现了两处错误,ES6 Promise 规范的2.3.1和2.3.4

    Jack Chen
  • 专栏:003:正则表达式

    谢伟
  • 正则表达式分组、断言详解

    正则表达式中的断言,作为高级应用出现,倒不是因为它有多难,而是概念比较抽象,不容易理解而已,今天就让小菜通俗的讲解一下。

    大道七哥
  • Selenium2+python自动化43-判断title(title_is)

    前言 获取页面title的方法可以直接用driver.title获取到,然后也可以把获取到的结果用做断言。 本篇介绍另外一种方法去判断页面title是否与期望结...

    上海-悠悠
  • html title属性,鼠标悬浮,显示隐藏的文字

    在写前端的时候,存在鼠标移动到某些元素的时候,显示文字提示的需求。这时候就可以使用title属性。

    Devops海洋的渔夫
  • kubeadm 的工作原理

    相信使用二进制部署过 k8s 集群的同学们都知道,二进制部署集群太困难了,有点基础的人部署起来还有成功的希望,要不然只能跟着别人的教程一步一步的去部署,部署的时...

    张琳兮
  • kubeadm 的工作原理

    相信使用二进制部署过 k8s 集群的同学们都知道,二进制部署集群太困难了,有点基础的人部署起来还有成功的希望,要不然只能跟着别人的教程一步一步的去部署,部署的时...

    张琳兮
  • 关于文档目录结构的反馈

    markdown编辑器的语法提示使用蓝色与黑色区分度太低,比如 * 就看不清楚是啥颜色。

    Fuchao

扫码关注云+社区

领取腾讯云代金券