全面解析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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
精解window.setTimeout()&window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
JS中递归函数
2016/06/17 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
python类型强制转换long to int的代码
2013/02/10 Python
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
python实现拓扑排序的基本教程
2018/03/11 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
Python新手学习raise用法
2020/06/03 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
党员自我批评与反省材料
2014/02/10 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
致800米运动员广播稿
2014/02/16 职场文书
党员教师工作决心书
2014/03/13 职场文书
班组长竞聘书
2014/03/31 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
临床专业自荐信
2014/06/22 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
奠基仪式致辞
2015/07/30 职场文书
家属联谊会致辞
2015/07/31 职场文书