ITPub博客

首页 > IT职业 > IT职场 > 聊聊javascript中的replace替换

聊聊javascript中的replace替换

IT职场 作者:kikiboy 时间:2021-09-09 09:13:32 0 删除 编辑

javascript字符串与数组有很多精巧的方法,比如splice、indexOf,而replace在字符串处理中偶尔会产生让人愉悦的效果

比如underscore中的模板引擎替换部分,又如信用卡分割的应用

简单来说,replace用于将字符串中一些字符替换为另一些字符,最简单的情况如下

var num = '1234567890123456';
var numStr = '';
numStr = num.replace('1', 'a');
console.log(numStr);//a234567890123456

这个结果,事实上不太理想,因为他只替换了一个,后面的1没有理我,于是这个时候正则便出现了

var num = '1234567890123456';
var numStr = '';
numStr = num.replace(/1/g, 'a');
console.log(numStr); //a234567890a23456

一个经典例子是,javascript实现的trim方法

String.prototype.trim = function () {
  return this.toString().replace(/(^s*)|(s*$)/g, '');
};
var str = ' sssssds  ';
alert('|' + str.trim() + '|'); //|sssssds|

正则出现的时候便会有一些比较特殊的标识“$”

图片描述

var str = ' 123 ';
console.log(str.replace(/(^s*)|(s*$)/g, '-$&-')); //- -123- ---

一切都很美好的时候,不满足的情况发生了,我们感觉这个结果与预期不符,具体原因我们后面再说,这里先看看函数回调情况:

var str = ' 123 ';
var arr = [];
/*
参数一为匹配到的字符串
参数二为子表达式中的数据对应( $i (i:1-99)),带|号便会产生(注意这里可能产生多个参数匹配)
参数三为匹配字符串的匹配下标
最后一个参数表示字符串本身
*/
console.log(str.replace(/(^s*)|(s*$)/g, function (match, $1, $2, offset) {
  console.log(arguments);
  arr.push('-' + (match || '') + '-');
  return '-' + (match || '') + '-';
}));
console.log(arr); //- -123- ---

以上其实想简单说明下函数与$的关系,导致输出的原因是因为正则没有写对:

var str = ' 123 ';
console.log(str.replace(/^(s+)|(s+)$/g, '-$&-'));

PS:上面那个正则还是抄的,所以以后碰到类似问题还是得自己验证才行啊

另外,我有一个信用卡账号要做格式转换:123456789012 => 1234 5678 9012

这个代码要用replace的话,不用函数便行不通的,

一旦匹配成功,会替换为后面函数的的返回值,这个函数匹配成功几次便会调用几次,有些时候我们可以把它当做一个循环使用。

var num = '123456789012';
var reg = /d{4}/g;
var index = 0;
var arr = [];

num.replace(reg, function (match, offset) {
  arr.push(match);
});
console.log(arr.join(' ')); //1234 5678 9012

最后我们来看看我们的underscore模板引擎语法,现在我们有一个模板字符串,我们要将它转换为一个函数,于是我们会这么做:

 1 var template = [
 2 '
    ',  3   '',  4   '
  • " data-index=""  class="disabled"',  5     '>',  6     '
  • ',  7   '',  8 '
',  9 '
', 10 '
', 11 '
', 12   ' 
' 13 ].join(''); 14  15 var escapes = { 16   "'": "'", 17   '\': '\', 18   'r': 'r', 19   'n': 'n', 20   't': 't', 21   'u2028': 'u2028', 22   'u2029': 'u2029' 23 }; 24 var escaper = /\|'|r|n|t|u2028|u2029/g; 25  26 var index = 0; 27 var source = "__p+='"; 28 var matcher = /(|||$/g; 29  30 template.replace(matcher, function (match, escape, interpolate, evaluate, offset) { 31   source += template.slice(index, offset) 32         .replace(escaper, function (match) { return '\' + escapes[match]; }); 33  34   if (escape) { 35     source += "'+n((__t=(" + escape + "))==null?'':_.escape(__t))+n'"; 36   } 37   if (interpolate) { 38     source += "'+n((__t=(" + interpolate + "))==null?'':__t)+n'"; 39   } 40   if (evaluate) { 41     source += "';n" + evaluate + "n__p+='"; 42   } 43   index = offset + match.length; 44   return match; 45 }); 46 source += "';n"; 47  48 source = 'with(obj||{}){n' + source + '}n'; 49  50 source = "var __t,__p='',__j=Array.prototype.join," + 51       "print=function(){__p+=__j.call(arguments,'');};n" + 52       source + "return __p;n"; 53  54 console.log(source);

上面的代码打印出的东西:

var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
with(obj||{}){
__p+='
    '; for(var i = 0, len = data.length; i '+ ((__t=(data[i].name ))==null?'':__t)+ ''; }  __p+='
 
'; } return __p;

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/4588/viewspace-2800753/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-08-13

  • 博文量
    0
  • 访问量
    465