正则表达式:描述字符串规则的表达式

使用test()方法,测试正则表达式与指定的字符串是否匹配

只要指定的字符串包含正则表达式所描述的内容返回true

js正则表达式-入门篇

js正则表达式-入门篇

如果我们要检测一个登陆框里的手机号是否符合要求,这样难以到达我们的目的,接下来就可以到用到正则表达式里的锚点

锚点:匹配一个位置

^ :匹配起始位置

/^http/表示以http开头

js正则表达式-入门篇

js正则表达式-入门篇

$ :匹配结尾位置

/\.jpg$/表示以.jpg结尾 其中 \为转义符

js正则表达式-入门篇

js正则表达式-入门篇

结合^和$

/^13911112222$/ 表示匹配以1开头以2结尾中间为391111222的字符串

js正则表达式-入门篇

js正则表达式-入门篇

如果我们想要/^13911112222$/以1开头之后数字为任意数字

这里可以用到字符类

 

字符类:[] 匹配一类字符的中的一个

[abc]:a或b或c

[0-9]:0到9中的任意一个数字

[^0-9]:非数字的一个字符 //注意^写在[ ]内表示非

[a-z]:a到z的一个字母

. :任一字符(换行除外)

js正则表达式-入门篇

js正则表达式-入门篇

那我们之前的需求可以这样写了

/^1[0-9][0-9] [0-9] [0-9] [0-9] [0-9] [0-9][0-9] [0-9][0-9] /

其中[0-9]来表达数字,一旦需要的数字变多,正则表达式会变得很长

有没有更好的方式呢?答案是肯定的

这里可以用到元字符

接下来介绍常见的元字符

\d :[0-9]                \D :[^\d]

\s :空白符            \S:[^\s]

\w :[A-Za-z0-9]    \W :[^\w]


js正则表达式-入门篇

有了元字符\d,之前的正则表达式可以写成

/^1\d\d\d\d\d\d\d\d\d\d/

但它还是很长

那我们正则表达式中的量词就可以出场了

 

量词:表示出现的次数

{m,n}: m到n次

* :    {0,}  //元字符* 表示出现0到无穷次

:    {0,1}  //元字符?表示出现0到1次 也就是0次或1次

+ :    {1,}     //元字符+ 表示至少出现1js正则表达式-入门篇


js正则表达式-入门篇

有了量词我们可以把之前的正则写成 /^1\d{10}$/

另外正则表达式还有一些很重要的知识点

其实上面我们接触了转义符\

在需要匹配的字符是元字符时我们要用到转义符了

/^http:\/\//      其中/需要转义,因为所有的正则表达式内容都包括在/ /里,是正则表达式语法的一部分

/@yxqiche\.com/ 其中元字符.表示任意字符

如果我们需要匹配以 .jpg或者 .jpeg结尾的字符串,我们可以用到 |

 

| :多选分支,表示或

 

例子:/\.(jpeg|jpg|png)$/

 

现在有个比较常见的需求是:提取浏览器url中的各个部分的内容

在这使用()捕获可以保存匹配到的字符串

如果不保存使用(?:)

捕获通常与字符串的一些方法搭配使用

 

str.match(regexp)

 

首先我们先分析下一条链接中通常包括哪些内容

以http://fenqi.etaoche.cn/hafuh/?channel=1234#about为例

其中

http:                           为protocol

fenqi.etaoche.cn    为host

/hafuh                       为 pathname

?channel                    为 search

#about                       为hash

js正则表达式-入门篇js正则表达式-入门篇

打印matchContent

js正则表达式-入门篇

js正则表达式-入门篇

str.replace(regexp,replacement);

js正则表达式-入门篇js正则表达式-入门篇

在控制台显示如下:

js正则表达式-入门篇

js正则表达式-入门篇

其中/(\d+),’$1.00’/是将()中捕获到第一个数字的内容替换

/(\d+),’$1.00’/g  这里的g是全局替换

当然str.replace(regexp,replacement) 中第二个参数还可以为函数,有兴趣的朋友可以去试试


相关文章:

  • 2021-09-14
猜你喜欢
  • 2021-08-01
  • 2021-10-04
  • 2022-12-23
  • 2022-12-23
  • 2021-12-10
  • 2022-12-23
  • 2021-07-06
相关资源
相似解决方案