正則表達式筆記（三）

String.replace

細心的讀者可能會發現，上篇文章咱們遺漏了 String.replace 這個方法。String.replace 在 JS 中有着更增強大的用法和靈活性，因此這裏剝離出來單獨介紹。

API

String.replace(searchValue, replacement)

String.replace 同時支持進行正則表達式或者字符串替換，並返回一個新的字符串。由於咱們的主題是正則表達式，因此接下來的內容，會以正則替換的狀況爲主。

默認狀況下，String.replace只進行一次替換。若設置了 g 模式，則全部匹配到的字符串都會替換

參數說明

• String: 須要替換的字符串
• searchValue: 字符串或者正則表達式
• replacement: 字符串或者函數

用法

字符串替換

'I am back end developer'.replace('back','front');
//"I am front end developer"

直接把字符串中的 back 替換成 front。當字符串中有兩個 back，狀況回事怎樣呢？

'I am back end developer, you are back end developer'.replace('back','front');
//"I am front end developer, you are back end developer"

能夠看到，第2個 back，並無被替換。若是須要把其餘 back 也一塊兒替換，這個時候就須要用到正則表達式。

正則表達式替換

設置了 g 模式，全局替換。

'I am back end developer, you are back end developer'.replace(/back/g,'front');
//"I am front end developer, you are front end developer"

在 replacement 字符串中，還有一些特殊的變量能夠使用。

特殊變量	說明
$1,$2,$3...$n	表示對應捕獲分組匹配的文本
$&	與正則相匹配的字符串
$$	'$' 字符
$`	匹配字符串左邊的字符
$'	匹配字符串右邊的字符

有趣的字符串替換

使用 $& 操做匹配的字符串。

var str = '有趣的字符串替換';
str.replace(/有趣的字符串/,'($&)');

//"(有趣的字符串)替換"

使用 $$ 聲明 $ 字符。

var str = '這個商品的價格是12.99';
str.replace(/\d+\.\d{2}/,'$$$&');

//"這個商品的價格是$12.99"

使用 $` 和 $' 字符替換內容

'abc'.replace(/b/,"$`");//aac
'abc'.replace(/b/,"$'");//acc

使用分組匹配組合新的字符串

'2015-05-06'.replace(/(\d{4})-(\d{2})-(\d{2})/,"$3/$2/$1")
//"06/05/2015"

函數參數

當replacement是一個函數參數的時候，對字符串操做的靈活性將有一個質的提升。

說明

'Stirng.replace'.replace(/(\w+)(\.)(\w+)/,function(){
    console.log(arguments) // ["Stirng.replace", "Stirng", ".", "replace", 0, "Stirng.replace"]
    return '返回值會替換掉匹配到的字符'
})

參數	說明
match	匹配到的字符串（此例爲 String.replace）
p1, p2, ...	正則使用了分組匹配時分組文本，不然無此參數（此例爲 "Stirng", ".", "replace"）
offset	匹配字符串的對應索引位置 （此例爲 0）
source	原始字符串（此例爲 String.replace）

案例 -- 樣式屬性的轉換

把駝峯字符轉換爲 - 鏈接符形式

'borderTop'.replace(/[A-Z]/g,function(m){
    return '-'+ m.toLowerCase()
})

//"border-top"

把 - 鏈接符形式轉換爲駝峯形式

'border-top'.replace(/-(\w)/g,function(m,s){
    return s.toUpperCase()
})

//"borderTop"

最後的牛刀小試

交給閱讀者發揮的內容：

須要將Hello-World使用正則替換成 HWeolrllod