紧接:"理清JavaScript正则表达式--上篇"

正则在String类中的应用

类String支持四种利用正则表达式的方法。分别是search、replace、match和split方法。下面将一一讲述。

--String.search(regexp)--

search相对于其他三个方法,是应用正则最简单的方法啦,作用就是根据参数regexp查找相应匹配模式。

具体如下:

方法search中的参数为正则表达式对象,倘若我们赋予的值不是正则表达式对象,而是字符串,那么search在内部首先得将传入的字符串转换成正则表达式对象,然后再给予匹配。匹配始终从字符串的初始位置开始,当找到第一个与正则表达式相匹配的字符时,就停止匹配,并返回匹配到的子串的起始位置。如果没有找到就返回-1。

注意:search找到第一个匹配结果后,就停止,并不会继续查找,so,标志g对它无效!

Demo如下:

--String.split(delimiter, limit)--

方法split,根据传入的delimiter参数,分割字符串,并返回一个分割后的字符串数组。

例如:

指定的分隔符delimiter,可以是字符串,也可以是正则表达式。如上所示。

咦,不是还有一个参数limit吗?它的作用为啥子呢?

这个可选参数limit,为整数,限定返回数组的最大长度。如下:

--String.replace(match, replacement)--

replace方法的作用为:根据match指定的规则,查找字符串,如果找到匹配结果,就用第二个参数replacement去替换。倘若match为regexp对象,并指定了全局搜索标志g,那么将对全局查找替换,而不是在找到第一个匹配后,就停止操作。

So参数match可以是RegExp对象,也可以是字符串,但是字符串因为没有规定全局搜索标志,所以如果match为字符串,那么当找到第一个匹配替换后,就停止查找。

例如:

你以为replace方法就这么结束了?No,No,No。

还记得在"理清"JavaScript正则表达式--上篇"中提到的括弧()的作用么?

括弧可以将需要在后续使用的内容,作为子表达式括起来,在正则表达式中可以利用反斜杠\加数字,对前面的子表达式引用。replace方法也有这么一功能,当然前提是参数match为RegExp对象,它是使用美元符$加相应的数字来引用,数字计算规则不变。

如下:

另,replace的第二个参数replacement不仅可以为字符串,还可以是函数哦。当字符串中与参数match匹配成功后,就调用这个replacement回调函数。

如我想将字符串中的所有单词的第一个字母都大写,那么利用replacement函数可以这样:

是不是很屌。

我们再细看看,这个回调函数的参数都有哪些,如下:

  第一个参数就是匹配字符串,如上面的demo;

  第二个参数是正则表达式中的子表达式(括号啦),没有子表达式,则没有该参数

  第三个参数是整数,声明了匹配项出现在字符串中的位置;

  第四个参数则是原字符串

--String.match(regexp)--

match方法返回与regexp相匹配结果的数组。参数regexp为RegExp对象,如果传入的参数不为RegExp对象,则match内部首先将其转换成RegExp对象。

注意:match方法返回的数组,与传入的参数regexp带不带全局搜索标志g,区别是非常大的。下面将进行说明。

1、  如果regexp不带标志g,那么match方法根据参数regexp匹配到首个子串后,就将停止继续往下查找匹配;如果一个匹配也没找到就返回null。

如下:

你以为就这么结束了么?No,No,No。

强大之处在于:如果你正则表达式中有子表达式(括号啦),那么返回的数组arr中,还包括这些与子表达式匹配的结果哦。arr[0]为匹配的文本,arr[1]为匹配的第一个子表达式,如此类推。

如下:

2、  如果regexp带有执行全局搜索标志g,那么match方法将返回所有与参数regexp匹配的所有结果的数组。

如下:

RegExp对象中exec和test方法

RegExp对象定义了两个用于执行模式匹配操作的方法:exec和test。下面将一一讲述。

--RegExp.exec(string)--

exec方法检索参数string,当有匹配结果时,返回一个数组。没有找到匹配结果时,则返回null。exec方法的调用分为两种:

1、  当RegExp中没有全局搜索标志g时,那么返回结果和String.match方法一样:返回的数组arr中,arr[0]为匹配的文本,如果有子表达式,那么arr[1]…就表示这些子表达式。并且将lastIndex置为0。注:lastIndex为RegExp对象的属性。

如下:

2、  当RegExp中有全局搜索标志g时,那么返回的结果还是和String.match一样。咦,什么套路?

不过,区别在于它会将RegExp对象的属性lastIndex置为紧接着上次找到匹配文本的字符位置,而不是为0。

如下:

那这点不同有什么用呢?

那就得看看lastIndex的作用咯。每次当,利用exec或者test方法检索字符串时,他们都是从lastIndex的位置为起点向后检索。

如下:

所以,当RegExp中有全局搜索标志g时,它将lastIndex置为紧接着上次找到匹配文本的字符位置,那么我们就可以循环检索字符串了。

如下:

--RegExp.test(string)--

test方法检测参数string字符串,是否含有匹配文本,如果有,则返回true,否则为false。RegExp中带没带全局搜索标志g的区别在于,对象的属性lastIndex。如果不带g,则lastIndex为0,否则将lastIndex置为紧接着上次找到匹配文本的字符位置。

如下:

好了,梳理JavaScipt中的正则表达式就到此结束啦~

最后,提供个学习正则的可视化工具:regexper.com/

理清JavaScript正则表达式--下篇的更多相关文章

  1. 理清JavaScript正则表达式--上篇

    在JavaScript中,正则表达式由RegExp对象表示.RegExp对象呢,又可以通过直接量和构造函数RegExp两种方式创建,分别如下: //直接量 var re = /pattern/[g | ...

  2. 理清JavaScript正则表达式

    理清JavaScript正则表达式--下篇 紧接:"理清JavaScript正则表达式--上篇". 正则在String类中的应用 类String支持四种利用正则表达式的方法.分别是 ...

  3. JavaScript正则表达式,你真的知道?

    一.前言 粗浅的编写正则表达式,是造成性能瓶颈的主要原因.如下: var reg1 = /(A+A+)+B/; var reg2 = /AA+B/; 上述两个正则表达式,匹配效果是一样的,但是,效率就 ...

  4. 【JS】javascript 正则表达式 大全 总结

    javascript 正则表达式 大全 总结 参考整理了一些javascript正则表达式 目的一:自我复习归纳总结 目的二:共享方便大家搜索 微信:wixf150 验证数字:^[0-9]*$ 验证n ...

  5. JavaScript正则表达式详解(一)正则表达式入门

    JavaScript正则表达式是很多JavaScript开发人员比较头疼的事情,也很多人不愿意学习,只是必要的时候上网查一下就可以啦~本文中详细的把JavaScript正则表达式的用法进行了列表,希望 ...

  6. JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  7. Python自动化 【第十八篇】:JavaScript 正则表达式及Django初识

    本节内容 JavaScript 正则表达式 Django初识 正则表达式 1.定义正则表达式 /.../  用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m ...

  8. JavaScript正则表达式下——相关方法

    上篇博客JavaScript 正则表达式上——基本语法介绍了JavaScript正则表达式的语法,有了这些基本知识,可以看看正则表达式在JavaScript的应用了,在一切开始之前,看看RegExp实 ...

  9. JavaScript 正则表达式上——基本语法

    定义 JavaScript种正则表达式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串 1. 构造函数 var reg=new RegExp('<%[^%>]+%&g ...

随机推荐

  1. Markdown 图片助手-MarkdownPicPicker

    title: Markdown 图片助手 v0.1 toc: true comments: true date: 2016-06-04 16:40:06 tags: [Python, Markdown ...

  2. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  3. Socket聊天程序——Common

    写在前面: 上一篇记录了Socket聊天程序的客户端设计,为了记录的完整性,这里还是将Socket聊天的最后一个模块--Common模块记录一下.Common的设计如下: 功能说明: Common模块 ...

  4. HTML5 input元素新的特性

    在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...

  5. nodejs进阶(1)—输出hello world

    下面将带领大家一步步学习nodejs,知道怎么使用nodejs搭建服务器,响应get/post请求,连接数据库等. 搭建服务器页面输出hello world var  http  =  require ...

  6. JavaScript权威指南 - 对象

    JavaScript对象可以看作是属性的无序集合,每个属性就是一个键值对,可增可删. JavaScript中的所有事物都是对象:字符串.数字.数组.日期,等等. JavaScript对象除了可以保持自 ...

  7. jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  8. ASP.NET Core 中文文档 第四章 MVC(3.9)视图组件

    作者: Rick Anderson 翻译: 娄宇(Lyrics) 校对: 高嵩 章节: 介绍视图组件 创建视图组件 调用视图组件 演练:创建一个简单的视图组件 附加的资源 查看或下载示例代码 介绍视图 ...

  9. [学习笔记]JavaScript之函数式编程

    欢迎指导与讨论:) 前言 函数式编程能使我们的代码结构变得简洁,让代码更接近于自然语言,易于理解. 一.减少不必要的函数嵌套代码 (1)当存在函数嵌套时,若内层函数的参数与外层函数的参数一致时,可以这 ...

  10. Openfire集群源码分析

    如果用户量增加后为了解决吞吐量问题,需要引入集群,在openfire中提供了集群的支持,另外也实现了两个集群插件:hazelcast和clustering.为了了解情况集群的工作原理,我就沿着open ...