javascript笔记 String类replace函数的一些事
更新时间：2011年09月22日 23:52:44 作者：
加固javascript基础知识目的是为以后研究jQuery源码做好铺垫。
我最近查阅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原始写法，希望能贡献出来，我想好好研究下。
复制代码 代码如下:
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中对象的prototype属性，是用来返回对象类型原型的引用的。我们使用prototype属性提供对象的类的一组基本功能。并且对象的新实例会”继承”赋予该对象原型的操作。但是这个prototype到底是怎么实现和被管理的呢？2010-03-03
最近公司项目用到了avtivex控件。以前从来没有用过。我把最近到处找到的使用方法整理一下。2011-01-01
最近常有人在Q群里发问诸如"怎样让js操作文件"、"怎样让js实现多线程"等问题。2010-03-03
JS跳出循环的5种方法总结(return、break、continue、throw等)
想必大家都遇到过循环遍历时遇到满足条件的时候就跳出循环这样的需求,于是整理了一篇各种循环是如何结束的,这篇文章主要给大家介绍了关于JS跳出循环的5种方法,分别是return、break、continue、throw等的相关资料,需要的朋友可以参考下2024-05-05
今天小编就为大家分享一篇Layui动态生成select下拉选择框不显示的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了NestJs使用Mongoose对MongoDB操作的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
JavaScript 没有任何特定语言功能来支持命名空间，但很容易使用对象来模拟命名空间。今天我们就来探讨下这个问题，希望大家能够喜欢。2015-04-04
BootStrap Datepicker 插件修改为默认中文的实现方法
bootstrap-datepicker 是一个非常优秀的时间选择插件，默认是英文显示日期的，通过下面几个小修改让其支持默认中文。下面通过本文给大家介绍BootStrap Datepicker 插件修改为默认中文的实现方法，一起看看吧2017-02-02
本篇文章给大家介绍不想让浏览器运行javascript脚本的方法，操作方法很简单，只需按照以下几步就可以完成，需要的朋友参考下2015-11-11
这篇文章主要为大家详细介绍了js实现图片查看器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
最新评论