全面解析JS字符串和正则表达式中的match、replace、exec等函数


Posted in Javascript onJuly 01, 2016

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

正则表达式由于不经常使用,所以容易经常忘记,下面小编把常用的函数和功能,简明扼要的罗列在此,以备日后查看:

RegExp对象的函数常用的有2个

1、test函数

用法:RegExpObject.test(string)

返回:如果字符串 string 中含有与 RegExpObject 匹配的文本,则返回 true,否则返回 false。

描述:这个方法没有什么特殊之处,对修饰符g没有什么特殊处理

示例:

var url = 'http://www.baidu.com?a=1&b=2&c=3';
var reg = /a=1/;
console.log(reg.test(url)); // 输出结果为 true

2、exec函数

用法:RegExpObject.exec(string)

返回:返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。

描述:

exec() 方法的功能非常强大,它是一个通用的方法,而且使用起来也比 test() 方法以及支持正则表达式的 String 对象的方法更为复杂。

如果 exec() 找到了匹配的文本,则返回一个结果数组。否则,返回 null。此数组的第 0 个元素是与正则表达式相匹配的文本,第 1 个元素是与 RegExpObject 的第 1 个子表达式相匹配的文本(如果有的话),第 2 个元素是与 RegExpObject 的第 2 个子表达式相匹配的文本(如果有的话),以此类推。除了数组元素和 length 属性之外,exec() 方法还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。我们可以看得出,在调用非全局的 RegExp 对象的 exec() 方法时,返回的数组与调用方法 String.match() 返回的数组是相同的。

但是,当 RegExpObject 是一个全局正则表达式时,exec() 的行为就稍微复杂一些。它会在 RegExpObject 的 lastIndex 属性指定的字符处开始检索字符串 string。当 exec() 找到了与表达式相匹配的文本时,在匹配后,它将把 RegExpObject 的 lastIndex 属性设置为匹配文本的最后一个字符的下一个位置。这就是说,您可以通过反复调用 exec() 方法来遍历字符串中的所有匹配文本。当 exec() 再也找不到匹配的文本时,它将返回 null,并把 lastIndex 属性重置为 0。

示例:

正则表达式带修饰符g

var url = 'http://www.baidu.com?a=1&b=2&c=3';
var reg = /([^?&=]+)=([^?&=])*/g;
console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]
console.log(reg.exec(url)); //["b=2", "b", "2", index: 25, input: "http://www.baidu.com?a=1&b=2&c=3"]
console.log(reg.exec(url)); //["c=3", "c", "3", index: 29, input: "http://www.baidu.com?a=1&b=2&c=3"]
console.log(reg.exec(url)); //null
reg.lastIndex = 0; //这段代码很重要哦,注意理解
console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: http://www.baidu.com?a=1&b=2&c=3]

正则表达式不带修饰符g

var url = 'http://www.baidu.com?a=1&b=2&c=3';
var reg = /([^?&=]+)=([^?&=])*/g;
console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]
console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]
console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]
console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]
reg.lastIndex = 0; 
console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: http://www.baidu.com?a=1&b=2&c=3]

发现不一样的地方了吗,把函数描述好好读一遍,就明白了^_^

String对象的函数支持正则的有4个,我们只说其中的2个

1、match函数

用法:stringObject.match(searchvalue | regexp),这里我们只说regexp模式

返回值:存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。

描述:

match() 方法将检索字符串 stringObject,以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。

如果 regexp 没有标志 g,那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本, match() 将返回 null。否则,它将返回一个数组,其中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本,而其余的元素存放的是与正则表达式的子表达式匹配的文本。除了这些常规的数组元素之外,返回的数组还含有两个对象属性。 index 属性声明的是匹配文本的起始字符在 stringObject 中的位置,input 属性声明的是对 stringObject 的引用。

如果 regexp 具有标志 g,则 match() 方法将执行全局检索,找到 stringObject 中的所有匹配子字符串。若没有找到任何匹配的子串,则返回 null。如果找到了一个或多个匹配子串,则返回一个数组。不过全局匹配返回的数组的内容与前者大不相同,它的数组元素中存放的是 stringObject 中所有的匹配子串,而且也没有 index 属性或 input 属性。

示例:

不带修饰符g

var url = 'http://www.baidu.com?a=1&b=2&c=3';
var reg = /([^?&=]+)=([^?&=])*/;
var result = url.match(reg);
console.log(result); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]
console.log(result.index); //21
console.log(result.input); //http://www.baidu.com?a=1&b=2&c=3

带修饰符g

var url = 'http://www.baidu.com?a=1&b=2&c=3';
var reg = /([^?&=]+)=([^?&=])*/g;
var result = url.match(reg);
console.log(result); //["a=1", "b=2", "c=3"]
console.log(result.index); //undefined
console.log(result.input); //undefined

发现不一样的地方了吗,把函数描述好好读一遍,就明白了^_^

2、replace函数

用法:stringObject.replace(regexp/substr,replacement)

返回值:一个新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。

描述:字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串,然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g,那么 replace() 方法将替换所有匹配的子串。否则,它只替换第一个匹配子串。

replacement 可以是字符串,也可以是函数。如果它是字符串,那么每个匹配都将由字符串替换。但是 replacement 中的 $ 字符具有特定的含义。如下表所示,它说明从模式匹配得到的字符串将用于替换。

字符 替换文本
$1、$2、...、$99 与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。
$& 与 regexp 相匹配的子串。
$` 位于匹配子串左侧的文本。
$' 位于匹配子串右侧的文本。
$$ 直接量符号。(意思就是要替换为 $ 符号的时候,就写两个$)

示例:

不带修饰符g

var url = 'http://www.baidu.com?a=1&b=2&c=3';
var reg = /([^?&=]+)=([^?&=])*/;
var url1 = url.replace(reg,function(a,b,c,d,e){
console.log(a,b,c,d,e); //a=1, a, 1, 21, http://www.baidu.com?a=1&b=2&c=3
return 'ok';
})
console.log(url1); //http://www.baidu.com?ok&b=2&c=3

带修饰符g

var url = 'http://www.baidu.com?a=1&b=2&c=3';
var reg = /([^?&=]+)=([^?&=])*/g;
var url1 = url.replace(reg,function(a,b,c,d,e){
console.log(a,b,c,d,e); //执行3次,分别输出为:a=1, a, 1, 21, http://www.baidu.com?a=1&b=2&c=3 和 b=2, b, 2, 25, http://www.baidu.com?a=1&b=2&c=3 和 | c=3, c, 3, 29, http://www.baidu.com?a=1&b=2&c=3
return 'ok';
})
console.log(url1); //http://www.baidu.com?ok&ok&ok

第二个参数为字符串时

var url = 'http://www.baidu.com?a=1&b=2&c=3';
var reg = /([^?&=]+)=([^?&=])*/; //不带修饰符g
var url1 = url.replace(reg,"$&")
console.log(url1); //http://www.baidu.com?a=1&b=2&c=3
var url1 = url.replace(reg,"$1")
console.log(url1); //http://www.baidu.com?a&b=2&c=3
var url1 = url.replace(reg,"$2")
console.log(url1); //http://www.baidu.com?1&b=2&c=3
var url1 = url.replace(reg,"$'")
console.log(url1); //http://www.baidu.com?&b=2&c=3&b=2&c=3
var reg = /([^?&=]+)=([^?&=])*/g; //带修饰符g
var url1 = url.replace(reg,"$&")
console.log(url1); //http://www.baidu.com?a=1&b=2&c=3
var url1 = url.replace(reg,"$1")
console.log(url1); //http://www.baidu.com?a&b&c
var url1 = url.replace(reg,"$2")
console.log(url1); //http://www.baidu.com?1&2&3
var url1 = url.replace(reg,"$'")
console.log(url1); //http://www.baidu.com?&b=2&c=3&&c=3&

以上所述是小编给大家介绍的全面解析JS字符串和正则表达式中的match、replace、exec等函数,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 事件参考手册
Dec 24 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
javascript实现控制文字大中小显示
Apr 28 Javascript
json传值以及ajax接收详解
May 24 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
浅谈JavaScript中的分支结构
Jul 01 #Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 #Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 #Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 #Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 #Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 #Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 #Javascript
You might like
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
js获取域名的方法
2015/01/27 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
2016/08/02 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
在python中bool函数的取值方法
2018/11/01 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
客服实习的个人自我鉴定
2013/10/20 职场文书
大学军训感想
2014/02/12 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
商务英语专业求职信
2014/06/26 职场文书
党员自我对照检查材料
2014/08/19 职场文书
安全生产标语口号
2015/12/26 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
使用Ajax实现无刷新上传文件
2022/04/12 Javascript