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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
Prototype使用指南之ajax
Jan 10 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 Javascript
vue+axios 拦截器实现统一token的案例
Sep 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
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
python使用xmlrpc实例讲解
2013/12/17 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
python3中函数参数的四种简单用法
2018/07/09 Python
简单了解django orm中介模型
2019/07/30 Python
Pytorch 实现权重初始化
2019/12/31 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
利用python汇总统计多张Excel
2020/09/22 Python
Nike瑞士官网:Nike CH
2021/01/18 全球购物
文明礼仪演讲稿
2014/05/12 职场文书
促销活动总结怎么写
2014/06/25 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
技术员个人工作总结
2015/03/03 职场文书
交通事故被告代理词
2015/05/23 职场文书
活动新闻稿范文
2015/07/17 职场文书