DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Javascript中replace()小結
Javascript中replace()小結
編輯:關於JavaScript     

關於定義

  replace() 方法用於在字符串中用一些字符替換另一些字符,或替換一個與正則表達式匹配的子串。

關於語法

stringObject.replace(regexp/substr,replacement)

關於參數

參數 描述

regexp/substr

必需。規定子字符串或要替換的模式的 RegExp 對象。

請注意,如果該值是一個字符串,則將它作為要檢索的直接量文本模式,而不是首先被轉換為 RegExp 對象。

replacement 必需。一個字符串值。規定了替換文本或生成替換文本的函數。


1、第一個參數regexp/substr,使用正則表達式時用全局標識符g,可以替換所有匹配的子串,否則只會匹配一次。

    例如:

var str = "aaaaa"; 
var str1 = str.replace("a", "b");
var str2 = str.replace(/a/g, "b");

  運行結果: str1 -> "baaaa",str2 -> "bbbbb"

2、第二個參數replacement,可以是字符串或者function,也可以是$字符具有的特定的含義。

字符 替換文本 $1、$2、...、$99 與 regexp 中的第 1 到第 99 個子表達式相匹配的文本。 $& 與 regexp 相匹配的子串。 $` 位於匹配子串左側的文本。 $' 位於匹配子串右側的文本。 $$ 直接量符號。

   a. function的例子:

var str = "111222aa";
str.replace(/(\d{3})/g, function(word){
 return "b";
});

     運行結果: "bbaa"

    b. $的例子

var str = "1234567890";
str.replace( /(\d{3})(\d{3})(\d{4})/g, "$1-$2-$3" );

     運行結果: "123-456-7890"

注: 大多時候是利用regexp和$的結合來實現需求,所以知道一些基本的正則表達式規則是有必要的。

字符串替換字符串

'I am loser!'.replace('loser','hero')

//I am hero!
直接使用字符串能讓自己從loser變成hero,但是如果有2個loser就不能一起變成hero了。

'I am loser,You are loser'.replace('loser','hero');
//I am hero,You are loser

正則表達式替換為字符串

'I am loser,You are loser'.replace(/loser/g,'hero')
//I am hero,You are hero

使用正則表達式,並將正則的global屬性改為true則可以讓所有loser都變為hero

有趣的替換字符

replaceValue可以是字符串。如果字符串中有幾個特定字符的話,會被轉換為特定字符串。

字符 替換文本
$& 與正則相匹配的字符串
$` 匹配字符串左邊的字符
$' 匹配字符串右邊的字符
$1,$2,$,3,…,$n 匹配結果中對應的分組匹配結果
使用$&字符給匹配字符加大括號

var sStr='討論一下正則表達式中的replace的用法';
sStr.replace(/正則表達式/,'{$&}');
//討論一下{正則表達式}中的replace的用法
使用$`和$'字符替換內容

'abc'.replace(/b/,"$`");
//aac
'abc'.replace(/b/,"$'");
//acc
使用分組匹配組合新的字符串

'[email protected]'.replace(/(.+)(@)(.*)/,"$2$1")
//@nimojs
replaceValue參數可以是一個函數

StringObject.replace(searchValue,replaceValue)中的replaceValue可以是一個函數.
如果replaceValue是一個函數的話那麼,這個函數的arguments會有n+3個參數(n為正則匹配到的次數)

先看例子幫助理解:

function logArguments(){ 
 console.log(arguments);
//["[email protected]", "nimojs", "@", "126.com", 0, "[email protected]"] 
 return '返回值會替換掉匹配到的目標'
}
console.log(
 '[email protected]'.replace(/(.+)(@)(.*)/,logArguments)
)

參數分別為

匹配到的字符串(此例為[email protected],推薦修改上面代碼的正則來查看匹配到的字符幫助理解)
如果正則使用了分組匹配就為多個否則無此參數。(此例的參數就分別為”nimojs”, “@”, “126.com”。推薦修改正則為/nimo/查看控制台中返回的arguments值)
匹配字符串的對應索引位置(此例為0)
原始字符串(此例為[email protected])
使用自定義函數將A-G字符串改為小寫

'JAVASCRIPT'.replace(/[A-G]/g,function(){
 return arguments[0].toLowerCase();
})
//JaVaScRIPT

使用自定義函數做回調式替換將行內樣式中的單引號刪除

'<span style="font-family:\'微軟雅黑\';">demo</span>'.replace(/\'[^']+\'/g,function(){  
 var sResult=arguments[0];
 console.log(sResult);//'微軟雅黑'
 sResult=sResult.replace(/\'/g,'');
 console.log(sResult);
//微軟雅黑
 return sResult;
})
//<span style="font-family:微軟雅黑;">demo</span>

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