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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
一些mootools的学习资源
Feb 07 Javascript
JS定时关闭窗口的实例
May 22 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
js仿京东放大镜效果
Aug 09 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 Javascript
js+h5 canvas实现图片验证码
Oct 11 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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
codeigniter框架批量插入数据
2014/01/09 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
JavaScript DOM基础
2015/04/13 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
python实现超市商品销售管理系统
2019/10/25 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
在Python中实现字典反转案例
2020/12/05 Python
python自动生成证件号的方法示例
2021/01/14 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
2014年党员公开承诺践诺书
2014/03/25 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
企业工会工作总结2015
2015/05/13 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript