深入理解 JavaScript 中的 replace 方法

最新推荐文章于 2024-09-17 13:42:29 发布

竹林幽深

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量797

点赞数

分类专栏： javascript 文章标签： javascript 正则表达式

javascript 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

深入理解 JavaScript 中的 replace 方法

浏览:66 点评: 0 发布时间: 2013-12-31 07:08:41

首先来介绍一下这个函数：

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

语法

 
             stringObject.replace(regexp/substr,replacement)

参数

1.regexp/substr

必需。规定子字符串或要替换的模式的 RegExp 对象。

请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。

2.replacement

必需。一个字符串值。规定了替换文本或生成替换文本的函数。

返回值

一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。

说明:第一个参数可以为普通的字符串形式，也可以为正则表达式；第二个参数，可以为普通的字符串，也可以以一个函数的方式嵌入(ECMAScript v3支持)。

下面举几个小例子来深入学习一下这个函数:

1.当两个参数全部是普通字符串时:

 
             var  
             ori_str =  
             "i am a coder, i am good, i love icodein website" 
             ;  
            
             var  
             new_str = ori_str.replace( 
             "am" 
             ,  
             "was" 
             );  
            
             console.log(new_str);

// 此时会输出：i was a coder, i am good, i love icodein website;

那么有时候，我们会想把一个句子中的某个单词，比如上句中的am全部替换为was，这个时候，就可以考虑正则表达式啦，如下:

2.当第一个参数为正则表达式，第二个参数为普通字符串时：

 
             var  
             ori_str =  
             "i am a coder, i am good, i love icodein website" 
             ;  
            
             var  
             new_str = ori_str.replace(/am/,  
             "was" 
             );  
            
             console.log(new_str);

// 这个时候，你会奇怪，为什么用了正则表达式，但是，会输出：i was a coder, i am good, i love icodein website;(跟上面例子结果一样啦)！

// 嗯，是的，因为遗漏了一点，在正则表达式中，如果想要匹配所有的可能性，要用到表达式的全局配置模式g，如下：

 
             var  
             new_str = ori_str.replace(/am/g,  
             "was" 
             );  
            
             console.log(new_str);

// 此时就会输出: i was a coder, i am good, i love icodein website;

情况又要出现了，这个时候，我们发现，上面这个句子不太正确唉，第一个i应该是大写的，我们会想到下面的句子：

 
             var  
             new_str = ori_str.replace(/i/g,  
             "I" 
             );  
            
             console.log(new_str);

// 唉……看看输出什么吧：I am coder, I am good, I love IcodeIn websIte;

// 很明显，会将句子中，其他地方的i也给替换掉。那我们就想到了，第二个参数其实也可以是一个函数的，如下：

3.当第一个参数为正则表达式，第二个参数为函数时：

 
             var  
             ori_str =  
             "i am a coder, i am good, i love icodein website" 
             ;  
            
             var  
             new_str = str.replace(/(.+,)s+(.+,)s+(.+)/g,  
             function 
             (word) {  
            
             var  
             pattern1_value = arguments[1];  
            
             var  
             pattern2_value = arguments[2];  
            
             var  
             pattern3_value = arguments[3];  
            
             return  
             pattern1_value.substring(0, 1).toUpperCase() + pattern1_value.substring(1) +  
             " " 
            
             + pattern2_value.substring(0, 1).toUpperCase() + pattern2_value.substring(1) +  
             " " 
            
             + pattern3_value.substring(0, 1).toUpperCase() + pattern3_value.substring(1) +  
             " " 
             ;  
            
             });

// 啊……终于好了，输出了:I am a coder, I am good, I love icodein website;

这里值得说明一下，可能大家对上例中，用到的arguments表示疑问，为什么是索引1，2，3呢，请看下面介绍：

此函数的参数分别为

arguments[0]:匹配到的字符串（此例为i am a coder, i am good, i love icodein website,推荐修改上面代码的正则来查看匹配到的字符帮助理解)

arguments[1-n]如果正则使用了分组匹配就为多个否则无此参数。（此例的参数就分别为"i am a coder,", "i am good,", "i love icodein website"。推荐修改正则查看控制台中返回的arguments值）

arguments[1+n+1]匹配字符串的对应索引位置（此例为0）

arguments[1+n+2]原始字符串(此例为i am a coder, i am good, i love icodein website)

嘿，没睡着吧，接下来还有更变态的，我现在想把第二句跟第一句换一下问题了，怎么办？看下面的解决方法吧：

4.第一个参数为正则表达式，最二个参数包含有特殊字符：

 
             var  
             ori_str =  
             "I am a coder, I am good, I love icodein website" 
             ;  
            
             var  
             new_str = ori_str.replace(/(.+,)s+(.+,)s+(.+)/g,  
             "$2 $1 $3" 
             );  
            
             console.log(new_str);