DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript 函數replace深入了解
JavaScript 函數replace深入了解
編輯:關於JavaScript     

replace函數接受兩個參數,第一個參數為字符串或正則表達式,第一個參數同樣可以接受一個字符串,還可能是一個函數。

      首先對於第一個參數為字符串的我們不再需要多說"I am a boy".replace("boy","girl"),輸出:"I am a girl"。在這裡想說的是第一個參數為正則的情形。對於正則表達式來說首先會根據是否全局的(全局//g)決定替換行為,如果是全部的則替換全部替換,非全局的只有替換首個匹配的字符串。例如:

復制代碼 代碼如下:
"Ha Ha".replace(/\b\w+\b/g, "He")  // He He

"Ha Ha".replace(/\b\w+\b/, "He")  //He Ha

1:第二個參數為字符串:

    對於正則replace約定了一個特殊標記符$:

1.$i (i:1-99) : 表示從左到右正則子表達式所匹配的文本。
2.$&:表示與正則表達式匹配的全文本。
3.$`(`:切換技能鍵):表示匹配字符串的左邊文本。
4.$'(‘:單引號):表示匹配字符串的右邊文本。
5.$$:表示$轉移。
下面來幾個demo:
復制代碼 代碼如下:
"boy & girl".replace(/(\w+)\s*&\s*(\w+)/g,"$2 & $1") //girl & boy

"boy".replace(/\w+/g,"$&-$&") // boy-boy

"javascript".replace(/script/,"$& != $`") //javascript != java

"javascript".replace(/java/,"$&$' is ") // javascript is script

2:第二個參數為函數:

      在ECMAScript3推薦使用函數方式,實現於JavaScript1.2.當replace方法執行的時候每次都會調用該函數,返回值作為替換的新值。

     函數參數的規定:

1.第一個參數為每次匹配的全文本($&)。
2.中間參數為子表達式匹配字符串,個數不限.( $i (i:1-99))
3.倒數第二個參數為匹配文本字符串的匹配下標位置。
4.最後一個參數表示字符串本身。
這就是本文所要說replace威力強大的地方,理論的東西都是干貨,我們需要示例解決一切空洞的問題:

1:字符串首字母大寫:

復制代碼 代碼如下:
String.prototype.capitalize = function(){

    return this.replace( /(^|\s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase();

    } );

};
console.log("i am a boy !".capitalize())

輸出:I Am A Boy !

2:對字符串“張三56分, 李四74分, 王五92分, 趙六84分”的分數提取匯總,算出平均分並輸出每個人的平均分差距。

復制代碼 代碼如下:
var s = "張三56分, 李四74分, 王五92分, 趙六84分";

var a = s.match(/\d+/g);

var sum = 0;

for(var i = 0 ; i < a.length; i++){

            sum += parseFloat(a[i]);

}

  

var avg = sum / a.length;

  

function f(){

            var n = parseFloat(arguments[1]);

            return n + "分" + "(" + ((n > avg) ? ("超出平均分" + (n - avg)) :

                        ("低於平均分" + (avg - n))) + "分)";

}

  

var result = s.replace(/(\d+)分/g, f);

console.log(result);

輸出:

張三56分(低於平均分20.5分), 李四74分(低於平均分2.5分), 王五92分(超出平均分15.5分), 趙六84分(超出平均分7.5分)

       JavaScript的replace函數再加上正則的高級應用,JavaScript的replace將會發回更大的威力所在,在這裡將不再深入正則高級應用斷言之類的。

出處:http://www.cnblogs.com/whitewolf/

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