js replace() 方法的应用和理解

string.replace(searchValue, replaceValue)
replace方法对string进行查找和替换,并返回一个新字符串
参数searchValue有两种形式:1、字符串 2、正则表达式
参数replaceValue也有两种形式:1、字符串 2、函数

当searchValue是一个字符串时,那么只会在这个字符串第一次出现的地方被替换
例如

var result = 'Nerver say Nerver!'.replace('Nerver','always');  

那么得到的结果将会是‘always say Nerver!’
如果searchValue是正则表达式,且带有g标识,则会替换所有匹配,没有g标识,也只会替换第一个参数,如

var result = 'Nerver say Nerver!'.replace(/Nerver/g,'always');

将得到‘always say always!’

当replaceValue是一个字符串、searchValue是一个正则,且含有分组,那么如果replaceValue里面带有‘$’,则会有特殊含义,其中用的最多就是$number,如$1(分组1捕获的文本)、$2(分组2捕获的文本)

var old = /\((\d{3})\)/g;  //前后是加上转义字符的括号,中间是表示分组的括号
var newStr = '(555)666777'.replace(old,'$1');
console.log(newStr); //555666777

()表示捕获型分组,被正则表达式匹配捕获到的字符串会被暂存起来,通俗点来说就是会保留,上面的正则表示匹配括号里有三个数字的字符串,而中间的三个数字被括号括起来表示被捕获了、replace函数中的$1表示替换字符串为分组1捕获的文本

如果对分组比较模糊,可以再看下面两段

var old = /\((\d{3})\)(666)/g; //包含两个分组
var newStr = '(555)666777'.replace(old,'$2-');
console.log(newStr);  //666-777

通过上面的正则可以找到‘(555)666’这一串字符串,而分组2捕获的是‘666’,替换的结果是在分组2捕获的文本后面加上‘-’

var old = /\((\d{3})\)(666)/g; //包含两个分组
var newStr = '(555)666777'.replace(old,'$2-$1'); //分组1捕获到的是555
console.log(newStr);  //666-555777

当replaceValue是一个函数,那替换起来会更加灵活,该函数返回的字符串会被用作替换文本,传递给这个函数的是第一个参数是整个匹配的文本,第二个参数是分组1捕获的文本,第三个是分组2捕获的文本,依次类推

比如,想把‘2018-02-01’这串字符串替换成‘02/01 2018’,可以这样写

var old = /(\d{4})-(\d{2})-(\d{2})/g;
var newStr = '2018-02-01'.replace(old,'$2/$3 $1');

也可以这样

var func = function (all,one,two,three) {
    return two+'/'+three+' '+one;
};
var old = /(\d{4})-(\d{2})-(\d{2})/g;
var newStr = '2018-02-01'.replace(old,func);

对于上面这种,可以直接用分组解决,但是对于需要匹配的字符串比较多,想对匹配的字符串做出比较大的改变,那么就必须用上函数了
比如想把‘2018-02-01 2017-02-01 2016-02-01’换成‘02/01 20xx 02/01 20xx 02/01 20xx’,

var func = function (all,one,two,three) {
    var one = '20xx';
    return two+'/'+three+' '+one;
};

var old = /(\d{4})-(\d{2})-(\d{2})/g;
var newStr = '2018-02-01 2017-02-01 2016-02-01'.replace(old,func);

参考文章:
1、《JavaScript语言精粹》第八章方法
2、《JavaScript正则表达式的分组匹配详解》http://www.jb51.net/article/79309.htm

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

yujin0213

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值