快捷導航

詳解JavaScript 中的 replace 方法

更新時間：2016年01月01日 09:59:42 作者：cssfirefly

這篇文章主要介紹了詳解JavaScript 中的 replace 方法的相關(guān)資料,需要的朋友可以參考下

定義和用法

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

stringObject.replace(regexp/substr,replacement)

參數(shù)	描述
regexp/substr	必需。規(guī)定子字符串或要替換的模式的 RegExp 對象。請注意，如果該值是一個字符串，則將它作為要檢索的直接量文本模式，而不是首先被轉(zhuǎn)換為 RegExp 對象。
replacement	必需。一個字符串值。規(guī)定了替換文本或生成替換文本的函數(shù)。

參數(shù)

描述

regexp/substr

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

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

replacement

必需。一個字符串值。規(guī)定了替換文本或生成替換文本的函數(shù)。

返回值

一個新的字符串，是用 replacement 替換了 regexp 的第一次匹配或所有匹配之后得到的。

正則字符

replaceValue可以是字符串。如果字符串中有幾個特定字符的話，會被轉(zhuǎn)換為特定字符串。

字符	替換文本
$$	直接量符號(就是當做'$$'字符用)
$&	與正則相匹配的字符串
$`	匹配字符串左邊的字符
$'	匹配字符串右邊的字符
$1,$2,$,3,…,$n	匹配結(jié)果中對應(yīng)的分組匹配結(jié)果

下面通過實例給大家介紹：

例子 1

在本例中，我們將使用 "W3School" 替換字符串中的 "Microsoft"：

<script type="text/javascript">
var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/, "W3School"))
</script>

輸出：

Visit W3School!

例子 2

在本例中，我們將執(zhí)行一次全局替換，每當 "Microsoft" 被找到，它就被替換為 "W3School"：

<script type="text/javascript">
var str="Welcome to Microsoft! "
str=str + "We are proud to announce that Microsoft has "
str=str + "one of the largest Web Developers sites in the world."
document.write(str.replace(/Microsoft/g, "W3School"))
</script>

輸出：

Welcome to W3School! We are proud to announce that W3School
has one of the largest Web Developers sites in the world.

例子 3

您可以使用本例提供的代碼來確保匹配字符串大寫字符的正確：

text = "javascript Tutorial";
text.replace(/javascript/i, "JavaScript");

例子 4

在本例中，我們將把 "Doe, John" 轉(zhuǎn)換為 "John Doe" 的形式：

name = "Doe, John";
name.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");

例子 5

在本例中，我們將把所有的花引號替換為直引號：

name = '"a", "b"';
name.replace(/"([^"]*)"/g, "'$1'");

例子 6

在本例中，我們將把字符串中所有單詞的首字母都轉(zhuǎn)換為大寫：

name = 'aaa bbb ccc';
uw=name.replace(/\b\w+\b/g, function(word){
 return word.substring(0,1).toUpperCase()+word.substring(1);}
 );

正則替換字符串

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

使用正則表達式，并將正則的global屬性改為true則可以讓所有l(wèi)oser都變?yōu)閔ero

使用$&字符給匹配字符加大括號

var sStr='討論一下正則表達式中的replace的用法';
sStr.replace(/正則表達式/,'{$&}');
//討論一下{正則表達式}中的replace的用法
使用$`和$'字符替換內(nèi)容
'abc'.replace(/b/,"$`");
//aac
'abc'.replace(/b/,"$'");
//acc
使用分組匹配組合新的字符串
'nimojs@126.com'.replace(/(.+)(@)(.*)/,"$2$1")
//@nimojs

replaceValue參數(shù)可以是一個函數(shù)

StringObject.replace(searchValue,replaceValue)中的replaceValue可以是一個函數(shù).

如果replaceValue是一個函數(shù)的話那么，這個函數(shù)的arguments會有n+3個參數(shù)（n為正則匹配到的次數(shù)）

先看例子幫助理解：

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

參數(shù)分別為

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

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

使用自定義函數(shù)做回調(diào)式替換將行內(nèi)樣式中的單引號刪除

<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>

以上內(nèi)容是小編給大家介紹的avaScript 中的 replace 方法，希望大家喜歡。

您可能感興趣的文章: