正規表示式筆記（三）

ideaspace發表於2015-05-06
筆記

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

相關文章