浅谈replace()

replace()简单介绍

replace()基本语法是String.replace(searchValue,replaceValue)，其中searchValue为字符串或者正则，replaceValue为字符串或者函数。对于第一个参数为字符串是很简单的。

var str = 'hello world';
str.replace('h','H');//Hello world

这算是最基本的的替换了。如果仅仅只用到这种替换的话，我只能说真是太无趣了。我们把正则拉出来，处理复杂的替换，用函数来实现逻辑上的难点。

深入了解replace()

1.第二个参数为字符串

如果第二个参数是字符串，还可以使用一些特殊的字符序列，将正则表达式操作得到的值插入到结果字符串中，下表列出了ECMAScript提供的这些特殊的字符序列。

字符	替换文本
$&	与正则相匹配的字符串
$`	匹配字符串左边的字符
$’	匹配字符串右边的字符
$n(n=1~99)	匹配结果中对应的分组匹配结果

 

 

 

 

 

 

 

我们用这些特殊字符序列实现一些复杂的功能。先来看看调换位置。

 var str = "hello world";
 var rep = /(\w+)\s(\w+)/;
 str.replace(rep, "$2, $1");

通过这些字符序列还可以对str做一些特殊的处理，比如说将‘hello’加上[]

 var str = "hello world";
 var rep = /(\w+)/;
 console.log(str.replace(rep, "[$1]"));

看一个stackoverflow上的问题

var iable = '<td>some text</td><td>some text2</td><td>some text3</td><td>some text4</td><td>some text5</td><td>some text6</td>';
var iable1 ='<td>some text</td><td>some text2</td></tr><tr><td>some text3</td><td>some text4</td></tr><tr><td>some text5</td><td>some text6</td></tr><tr>';

问题是如何从iable转化为iable1，也就是怎么做才能把some text2、some text4和some text6后的</td>替换为</td></tr><tr>

var variable = '<td>some text</td><td>some text2</td><td>some text3</td><td>some text4</td><td>some text5</td><td>some text6</td>';

var reg = /(<td>.*?<\/td><td>.*?)<\/td>/g;

alert(variable.replace(reg, '$1</tr><tr>'));

这个是其中一个用户给出的答案，用的是replace函数，当然还有其他的更简单的一些方法，有兴趣的可以去看看。

对于replace(),能把正则理解透彻，这些替换也就不难了。

2.第二个参数是函数

函数为replace()增加了很多的灵活性，在实际应用中个人感觉会用到很多（还莫有写太多h5），因为我们会用到太多的交互，用函数传参就很好实现了。

 (function (window) {  
     function fn(str) {  
         this.str = str;  
     }  
     fn.prototype.format = function () {  
         var arg =Array.prototype.slice.call(arguments,0);return this.str.replace(/\{(\d+)\}/g, function (a, b) {  
             return arg[b] || '';  
         });  
     }  
     window.fn = fn;  
 })(window);  
 // use  
 (function(){  
     var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
     console.log( t.format('http://www.alibaba.com', 'Alibaba', 'Welcome') );  
 })();

这个是阿里巴巴一个面试题，具体考的是什么，还有函数是怎么实现的我就不多说了，我们主要来看下a和b的值对应的是什么。从arg[b]可以看出b应该是数字，应为arg是数组，而且根据format()所传的参数能推断出b为0，1，2。那么a是什么呢？我们可以把arg[b]换成a，然后运行，看下结果是什么。打印结果是“<p><a href="{0}">{1}</a><span>{2}</span></p>”，看到结果的我也是惊了个呆，赶紧查看是不是哪出错了，仔细看了下才发现a原来是匹配的字符，恍然大悟。

其实传入的函数还有另两个参数，我们把它们写进去，分别为c和d，然后按照同样的方法进行打印，也就得到c和d所代表的内容。那么这4个参数：第一个参数表示匹配到的字符，第二个参数表示匹配到的字符最小索引位置（RegExp.index），第三个参数表示被匹配的字符在整个字符串的位置，第四个参数表示被匹配的整个字符串。

了解了这几个参数是什么，相信对于函数传参的使用也就信手拈来了。