javascript笔记 String类replace函数的一些事


Posted in Javascript onSeptember 22, 2011

我最近查阅javascript资料,发现了一个函数:

function format(s) 
{ 
var args = arguments; 
var pattern = new RegExp("%([1-" + arguments.length + "])","g"); 
return String(s).replace(pattern,function(word,index){ 
return args[index]; 
}); 
} 
// test 
window.onload = alert(format("And the %1 want to know whose %2 you %3", "papers", "shirt", "wear")); 
//And the papers want to know whose shirt you wear

这种功能的函数,在shell或java都似曾见过,但是在javascript函数实现的方法很新颖。新颖的地方就是在:
return String(s).replace(pattern,function(word,index){ 
return args[index]; 
});

但是这里String类的replace的用法和我平时用的很不一样,我以前写过一个这样的replace的函数:
function myReplace(s) 
{ 
return String(s).replace(/CJ[0-9]{2}/g,function(word){ 
return word = 'CJJK00'; 
}); 
} 
//window.onload = alert(myReplace('CJ9080,CJ8976,CJ12919,CJ8765'));//CJJK0080,CJJK0076,CJJK00919,CJJK0065

我在使用replace时候,如果第二个参数是function我一般都只用到第一个参数,基本没有思考它的第二个,第三个或者更多的参数,现在看到有人使用了第二个参数,就很想探求下replace第二个参数使用到了function时候,里面参数到底有多少个,每个的含义到底如何?
下面是我改写了我自己写的替换函数:
function myReplaceFtn(s) 
{ 
return String(s).replace(/CJ[0-9]{2}/g,function(word,index){ 
return word = 'CJJK00@' + index + "@"; 
}); 
} 
//window.onload = alert(myReplaceFtn('CJ9080,CJ8976,CJ12919,CJ8765'));//CJJK00@0@80,CJJK00@7@76,CJJK00@14@919,CJJK00@22@65

本来我以为,函数format里的function(word,index),我认为应该是正则表达式所匹配字符串的索引(%1的索引为1,%2的索引为2,%3的索引为3),而我写的函数里面第二个参数index不是被匹配到字符串的索引,而是被匹配到的字符在原字符串的位置。下面我做了这样的测试:
function format(s) 
{ 
var args = arguments; 
var pattern = new RegExp("%([1-" + arguments.length + "])","g"); 
return String(s).replace(pattern,function(word,index){ 
alert("arguments.length:" + arguments.length);//4 
return args[index]; 
}); 
} 
function myReplaceFtn(s) 
{ 
return String(s).replace(/CJ[0-9]{2}/g,function(word,index){ 
alert("arguments.length:" + arguments.length);//3 
return word = 'CJJK00@' + index + "@"; 
}); 
}

函数format里面function(word,index)的参数有4个,而函数myReplaceFtn(s)里面function(word,index)的参数有3个。为什么会有这样的不同?我做了如下测试:
//以下程序在firefox里面运行 
function newformat(s) 
{ 
var args = arguments; 
var pattern = new RegExp("%([1-" + arguments.length + "])","g"); 
return String(s).replace(pattern,function(word,index){ 
console.log("arguments.length:" + arguments.length); 
for (var i = 0,j = arguments.length;i<j;i++) 
{ 
console.log("标示newformat" + i + ":" + arguments[i]); 
} 
return args[index]; 
}); 
} 
function newmyReplace(s) 
{ 
return String(s).replace(/CJ[0-9]{2}/g,function(word){ 
console.log("arguments.length:" + arguments.length); 
for (var i = 0,j = arguments.length;i<j;i++) 
{ 
console.log("标示newmyReplace" + i + ":" + arguments[i]); 
} 
return word = 'CJJK00'; 
}); 
}

结果:
arguments.length:4
标示newformat0:%1
标示newformat1:1
标示newformat2:8
标示newformat3:And the %1 want to know whose %2 you %3
arguments.length:4
标示newformat0:%2
标示newformat1:2
标示newformat2:30
标示newformat3:And the %1 want to know whose %2 you %3
arguments.length:4
标示newformat0:%3
标示newformat1:3
标示newformat2:37
标示newformat3:And the %1 want to know whose %2 you %3
arguments.length:3
标示newmyReplace0:CJ90
标示newmyReplace1:0
标示newmyReplace2:CJ9080,CJ8976,CJ12919,CJ8765
arguments.length:3
标示newmyReplace0:CJ89
标示newmyReplace1:7
标示newmyReplace2:CJ9080,CJ8976,CJ12919,CJ8765
arguments.length:3
标示newmyReplace0:CJ12
标示newmyReplace1:14
标示newmyReplace2:CJ9080,CJ8976,CJ12919,CJ8765
arguments.length:3
标示newmyReplace0:CJ87
标示newmyReplace1:22
标示newmyReplace2:CJ9080,CJ8976,CJ12919,CJ8765
对于回调函数里的arguments值现在比较清晰了,arguments个数的不同应该和我们写的正则表达式有关系,不管怎样,第一个参数是匹配到的字符串,最后一个是原字符串,倒数第二个参数是匹配到的字符串的在原字符串索引的起始位,像format里的第二个参数index根据情况而定了,我自己写的newmyReplace里没有这个参数,format的index参数是%[1-4],里面的1-4,不过还是写个方法确定下:
function charFormat(s) 
{ 
var pattern = new RegExp("%([a-d])","g"); 
return String(s).replace(pattern,function(word,index){ 
switch(index) 
{ 
case 'a': 
return 'thisisA'; 
case 'b': 
return 'thisisB'; 
case 'c': 
return 'thisisC'; 
case 'd': 
return 'thisisD'; 
default: 
return 'thisisNULL'; 
} 
}); 
} 
window.onload = console.log(charFormat("And the %a want to know whose %d you %b", "papers", "shirt", "wear")); 
//And the thisisA want to know whose thisisD you thisisB

由此可见String的replace是相当的强大,不过本人正则表达式功力还不够,不知道还有什么别的特别的正则表达式会产生什么不同的结果。另外不知道谁有javascript里面String类replace原始写法,希望能贡献出来,我想好好研究下。
Javascript 相关文章推荐
JS Timing
Apr 21 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 Javascript
Prototype的Class.create函数解析
Sep 22 #Javascript
Javascript中的this绑定介绍
Sep 22 #Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 #Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 #Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 #Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 #Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 #Javascript
You might like
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
JavaScript 对象模型 执行模型
2010/10/15 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
Vue实现购物车功能
2017/04/27 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
Python 正则表达式入门(初级篇)
2016/12/07 Python
Python批量查询域名是否被注册过
2017/06/21 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
python浪漫表白源码
2019/04/05 Python
手写一个python迭代器过程详解
2019/08/27 Python
学习Django知识点分享
2019/09/11 Python
pandas-resample按时间聚合实例
2019/12/27 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
毕业生自荐书模版
2014/01/04 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript