DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> javascript中replace( )方法的使用
javascript中replace( )方法的使用
編輯:JavaScript綜合知識     

   JavaScript中replace函數方法是返回根據正則表達式進行文字替換後的字符串的復制。使用方法:其中stringObj是必選項。要執行該替換的 String 對象或字符串文字。

  最近在浏覽一些阿裡的前端面試題,其中有一題涉及了javascript中replace( )方法的使用,下面是原題:

  “說出以下函數的作用是?空白區域應該填寫什麼?”

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // define (function (window) { function fn(str) { this.str = str; } fn.prototype.format = function () { var arg = ______; return this.str.replace(_______, 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') ); })();

  以下是分析過程(感覺還是弄個編號,個人覺得比較有條理一些)

  1、因為本題也涉及了到其它的知識點,如匿名函數、原型等知識點,但不是本次討論的重點。

  2、根據題面,我們知道,該題的源碼類似於寫一個模板引擎。將模板裡的‘{1}'之類的占位符替換成傳給它的參數。所以arg應該就是arguments。但是!!!由於arg不是數組,而是一個類數組對象(不懂的可自行百度(u_u)),所以我們需要進行一些轉換,

  復制代碼 代碼如下:

  var arg=Array.prototype.slice.call(arguments,0);

  3、等號右邊也就是第一空的答案了。說了這麼多,那麼接下來第二空就是我們要討論的重點了~~~~~~我們都知道第二空是要通過正則找出占位符,並根據占位符內的數字將其替換成arg數組內的字符串,說實話replace方法的第二個參數為函數的情況很少遇到,一般我們遇到都是這樣的,看下面的代碼:

  復制代碼 代碼如下:

  var pattern=/8(.*)8/;

  var str='This is a 8baidu8';

  document.write(str.replace(pattern,'$1'));

  4、由於replace第二個參數是函數的情況比較少,那麼我們就來重點談談第二個參數為函數的情形。

  首先這是replace函數的語法:stringobject.replace(regexp/substr,replacement)

  其中regexp/substr必需。規定字符串或要替換的模式的regexp對象。(請注意,如果該值是一個字符串,則將它作為要檢索的直接量文本模式,而不是首先被轉換為 regexp 對象。) replacement必需。一個字符串值。規定了替換文本或生成替換文本的函數。最後返回一個新的字符串,是用replacement替換了regexp的第一次匹配或所有匹配之後得到的。

  5、ECMAScript規定,replace()方法的參數replacement可以是函數而不是字符串。在這種情況下,每個匹配都調用該函數,它返回的字符串將替換文本使用。第一個參數表示匹配到的字符,第二個參數表示匹配到的字符最小索引位置(RegExp.index),第三個參數表示被匹配的字符串(RegExp.input)。

  6、所以第二空可以這樣寫:/{(d+)}/g,放在語句中完整為:

  復制代碼 代碼如下:

  return this.str.replace(/{(d+)}/g, function (a, b) {

  return arg[b] || '';

  });

  執行第一次匹配時,{0}被替代為arg[0]

  執行第一次匹配時,{1}被替代為arg[1]

  執行第一次匹配時,{2}被替代為arg[2]

  7、以上就是js字符串方法replace()的第二個參數為函數講解(有不完善的地方,自行補充),當然這道面試題也解決了~~~~~

  以上所述就是本文的全部內容了,希望大家能夠喜歡。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved