浅谈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 text二、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），第三个参数表示被匹配的字符在整个字符串的位置，第四个参数表示被匹配的整个字符串。

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