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 相关文章推荐
有关DOM元素与事件的3个谜题
Nov 11 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
javascript基本语法
May 31 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
node使用promise替代回调函数
May 07 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
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
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
Python编写一个优美的下载器
2018/04/15 Python
python实现邮件自动发送
2019/08/10 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
python suds访问webservice服务实现
2020/06/26 Python
django下创建多个app并设置urls方法
2020/08/02 Python
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
水污染治理专业毕业生推荐信
2013/11/14 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
spring boot实现文件上传
2022/08/14 Java/Android