淺談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），第三個參數表示被匹配的字符在整個字符串的位置，第四個參數表示被匹配的整個字符串。

瞭解了這幾個參數是什麼，相信對於函數傳參的使用也就信手拈來了。