JavaScript正则表达式应用---replace()
replace()
方法使用一个替换值(replacement)
替换掉一个匹配模式(pattern)
在原字符串中某些或所有的匹配项,并返回替换后的字符串。这个替换模式可以是字符串或者RegExp
(正则表达式),替换值可以是一个字符串或者一个函数。
语法
str.replace(regexp|substr, newSubStr|function[, flags])
参数
- regexp:一个
RegExp
对象。该正则所匹配的内容会被第二个参数的返回值替换掉。 - substr:一个要被
newSubStr
替换的字符串。 - newSubStr:替换掉第一个参数在原字符串中的匹配部分。该字符串中可以内插一些特殊的变量名。
- function:一个用来创建新子字符串的函数,该函数的返回值将替换掉第一个参数匹配到的结果。该函数的参数描述请参考 指定一个函数作为参数 小节。
- flags:注意:
flags
参数在v8
内核(Chrome and NodeJs)
中不起作用。一个字符串指定正则表达式标志的组合。在String.prototype.replace()
方法中使用flags
参数不是符合标准的并且不赞成这样做。使用一个带有相应标志(flags)
的RegExp
对象来代替此参数。该参数的值应该是下面的一个或多个字符,具体作用见下:
标签 | 描述 |
---|---|
g |
全局匹配 |
i |
忽略大小写 |
m |
多行模式 |
y |
sticky |
返回值
一个部分或全部匹配由替代模式所取代的新的字符串。
描述
该方法并不改变调用它的字符串本身,而只是返回替换后的字符串。
在进行全局的搜索替换时,第一个参数要么时包含g
标志的正则表达式,要么时包含g
标志的字符串。
使用字符串作为参数
替换字符串可以插入下面的特殊变量名:
变量名 | 代表的值 |
---|---|
$$ |
插入一个 "$" 。 |
$& |
插入匹配的子串。 |
$` | 插入当前匹配的子串左边的内容。 |
\$' |
插入当前匹配的子串右边的内容。 |
\$n or \$nn |
假如第一个参数时RegExp 对象,并且n 或nn 是个十进制的数字,那么插入第n 个括号匹配的字符串。 |
指定一个函数作为参数
你可以指定一个函数作为第二个参数。在这种情况下,当匹配执行后, 该函数就会执行。 函数的返回值作为替换字符串。(注意:上面提到的特殊替换参数在这里不能被使用。)另外要注意的是,如果第一个参数是正则表达式,并且其为全局匹配模式,那么这个方法将被多次调用,每次匹配都会被调用。
下面是该函数的参数:
变量名 | 代表的值 |
---|---|
match |
匹配的子串。(对应于上述的$& 。) |
p1 , p2 , ... |
假如replace() 方法的第一个参数是一个RegExp 对象,则代表第n个括号匹配的字符串。(对应于上述的$1 ,$2 等。) |
offset |
匹配到的子字符串在原字符串中的偏移量。(比如,如果原字符串是“abcd” ,匹配到的子字符串时“bc” ,那么这个参数将时1) |
string |
被匹配的原字符串。(精确的参数个数依赖于replace() 的第一个参数是否是一个正则表达式对象,以及这个正则表达式中指定了多少个括号子串。) |
下面的例子将会使newString
变成'abc - 12345 - #$*%'
:
function replacer(match, p1, p2, p3, offset, string) {
// p1 is nondigits, p2 digits, and p3 non-alphanumerics
return [p1, p2, p3].join(' - ');
}
var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
示例
在 replace() 中使用 global 和 ignore 选项
下面的例子中,正则表达式包含有全局替换(g)
和忽略大小写(i)
的选项,这使得replace
方法用'oranges'
替换掉了所有出现的"apples"
。
var re = /apples/gi;
var str = "Apples are round, and apples are juicy.";
var newstr = str.replace(re, "oranges");
print(newstr);
和上面的例子比起来,下面的例子中replace
方法的第一个参数使用字符串而不是正则表达式,g
和i
选项只能放在三个参数中。
var str = "Apples are round, and apples are juicy.";
var newstr = str.replace("apples", "oranges", "gi");
print(newstr);
这两个例子都打印出 "oranges are round, and oranges are juicy."
在 replace()方法中使用正则直接量
下面的例子中,replace()
方法的第一个参数使用正则表达式直接量并且使用了i
(忽略大小写)选项
var str = "Twas the night before Xmas...";
var newstr = str.replace(/xmas/i, "Christmas");
print(newstr); // Twas the night before Christmas...
打印出 "Twas the night before Christmas..."
交换字符串中的两个单词
下面的例子演示了如何交换一个字符串中两个单词的位置,这个脚本使用$1
和 $2
代替替换文本。
var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1");
print(newstr);
打印出 "Smith, John"
。
使用一个函数来修改匹配到的字符。
在这个例子中,所有出现的大写字母转换未小写,并且在匹配位置前加一个连字符。重要的是,在返回一个替换了的字符串前需要在匹配元素前需要进行添加操作。
在返回前,替换函数允许匹配片段作为参数,并且将它和连字符进行连接作为新的片段。
function styleHyphenFormat(propertyName) {
function upperToHyphenLower(match) {
return '-' + match.toLowerCase();
}
return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
}
此代码 styleHyphenFormat('borderTop')
将返回 'border-top'
。
因为我们想在最终的替换中进一步转变匹配结果,所以我们必须使用一个函数。这迫使我们在使用toLowerCase()
方法前进行评估。如果我们尝试不用一个函数进行匹配,那么使用toLowerCase()
方法将不会有效。
var newString = propertyName.replace(/[A-Z]/, '-' + '$&'.toLowerCase()); // won't work
这是因为'$&'.toLowerCase()
首先作为一个字符串(导致相同的'$&')之前使用字符作为模式。
将华氏温度转换为对等的摄氏温度
下面的例子演示如何将华氏温度转换为对等的摄氏温度。华氏温度用一个数字加一个"F"
来表示,这个函数将返回一个数字加"C"
来表示的摄氏温度。例如,如果输入是212F
,这个函数将返回100C
。如果输入数字时0F
,这个方法将返回"-17.77777777777778C"
。
正则表达式test
检查任何数字是否以F
结尾。华氏温度通过第二个参数p1
进入函数。这个函数基于华氏温度作为字符串传递给f2c
函数设置成摄氏温度。然后f2c()
返回摄氏温度。这个函数与Perl
的 s///e
标志相似。
function f2c(x) {
function convert(match, p1, offset, s) {
return ((p1-32) * 5/9) + "C";
}
var test = /(\d+(?:\.\d*)?)F/g;
return x.replace(test, convert);
}
数字转为千分位
数字千分位就是将数字三个一分,如1234567890
转为1,234,567,890
。
var str = "1234567890";
str.replace(/\d{1,3}(?=(\d{3})+$)/g, function(match) {
return match + ',';
});
详简:正则表达式/\d{1,3}(?=(\d{3})+$)/g
中的\d
表示匹配数字,{1,3}
表示匹配1到3次,\d{1,3}
表示匹配连续的1到3个数字,\d{3}
匹配连续的三个数字,(?=)
表示反向匹配,即为从后向前匹配,(?=(\d{3})+$)
就表示从后向前三位数字一匹配,至少匹配一次,而最前面必须有1到3个数字,即第一次的\d{1,3}
,最后的参数g
表示全局匹配,匹配完所有。
下面在回调函数中多添加几个参数。
var str = "1234567890";
str.replace(/\d{1,3}(?=(\d{3})+$)/g, function(match, p1, offset, string) {
//return s+',';
console.log(match, p1, offset, string);
});
match
为\d{1,3}
匹配到的字符串,p1
是(\d{3})
每次匹配到的字符串,offset
为match
的起始位置(从0开始),string
始终为原始字符串。
输出结果如下:
1 890 0 1234567890
234 890 1 1234567890
567 890 4 1234567890
参考
以上文章多数拷贝于replace(),本人也翻译了一部分,有什么错误及理解不当的地方还望指正!
JavaScript正则表达式应用---replace()的更多相关文章
- 【JS】javascript 正则表达式 大全 总结
javascript 正则表达式 大全 总结 参考整理了一些javascript正则表达式 目的一:自我复习归纳总结 目的二:共享方便大家搜索 微信:wixf150 验证数字:^[0-9]*$ 验证n ...
- 理清JavaScript正则表达式--下篇
紧接:"理清JavaScript正则表达式--上篇". 正则在String类中的应用 类String支持四种利用正则表达式的方法.分别是search.replace.match和s ...
- JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解
二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...
- Python自动化 【第十八篇】:JavaScript 正则表达式及Django初识
本节内容 JavaScript 正则表达式 Django初识 正则表达式 1.定义正则表达式 /.../ 用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m ...
- JavaScript正则表达式下——相关方法
上篇博客JavaScript 正则表达式上——基本语法介绍了JavaScript正则表达式的语法,有了这些基本知识,可以看看正则表达式在JavaScript的应用了,在一切开始之前,看看RegExp实 ...
- javascript正则表达式速查
声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 作用 数据有效性验证 替换文本 提取文本 声明方式 字面量的声明方式 示例:var re = /a/gi; RegExp声明方 ...
- javascript 正则表达式基础知识汇总
正则表达式:对字符串中的信息实现查找.替换和提取操作.(不支持注释和空白,必须写在一行内)正则表达式的创建:包含在一对斜杠之间的字符(直接量语法)例如:var pattern = /s$/; ...
- 正则表达式入门教程&&经典Javascript正则表达式(share)
前言 例子: ^.+@.+\\..+$ 这样的代码曾经多次把我自己给吓退过.可能很多人也是被这样的代码给吓跑的吧.继续阅读本文将让你也可以自由应用这样的代码. 正文 教程:正则表达式30分钟入门教程 ...
- javascript正则表达式简介
javascript正则表达式 javascript正则表达式 regular expression是一个描述字符模式的对象: ECMAScript中的RegExp类表示正则表达式: String ...
随机推荐
- 【Flask】查询分页问题处理
遇到两次查询结果分页的问题, 查询出结果后, 翻页时导致查询条件失效. 处理方式 1. 路由中不放page参数 写成 @testfile.route("/test-file", m ...
- php 通用redis类
php 通用redis类 <?php /** * redis操作类 * 说明,任何为false的串,存在redis中都是空串. * 只有在key不存在时,才会返回false. * 这点可用于防止 ...
- Group By 和 Having, Where ,Order by执行顺序
1.Group By 和 Having, Where ,Order by这些关键字是按照如下顺序进行执行的:Where, Group By, Having, Order by. 首先where将最原始 ...
- 51nod 1681
题目 神犇题解 这题挺神的..思路很巧妙 首先想到DFS序(毕竟是子树问题),这道题可以转化成:我们对于每一个节点的子树区间去看,两棵树同一节点的这个子树区间有多少个相同元素,设个数为x,那么这个点的 ...
- 算法(Algorithms)第4版 练习 1.5.1
id数组的变化情况: 0 1 2 3 4 5 6 7 8 9 10 components 9 0 0 1 2 3 4 5 6 7 8 0 9 components 3 4 0 1 2 4 5 6 7 ...
- Oracle视图的使用
--视图的语法 create [ or replace ] [NO Force | Force] View schema.view_name--视图名称 [(alias,...)inline_cons ...
- Codeforces 571B Minimization:dp + 贪心【前后相消】
题目链接:http://codeforces.com/problemset/problem/571/B 题意: 给你一个长度为n的数列a[i]. 现在你可以随意改变数字的位置,问你 ∑| a[i] - ...
- 给手机发验证码 综合使用 (忘记密码处理 php发验证码 重置用户密码)
前台页面 提取手机号调用 jQuery的ajax,到发送验证码 [php] view plain copy <title>找回密码 - 2015年xxx报名系统</title> ...
- c语言代码风格
简要:主要介绍了K&R风格和Allman(BSD)风格之间的缩进大小和大括号位置等区别 关于其它的代码风格,详见:Indent style - Wikipedia. 1.K&R sty ...
- 造成segmentation fault的可能原因分析
一 造成segment fault,产生core dump的可能原因 1.内存访问越界 a) 由于使用错误的下标,导致数组访问越界 b) 搜索字符串时,依靠字符串结束符来判断字符串是否结束,但是字符串 ...