🔰replacer function

JS ⟩ value ⟩ primitive ⟩ String ⟩ method ⟩ .replace() ⟩ replacer function

💈範例

• 💈範例：

  • minus one - replacer function example.

• codepen ⟩ str.replace()

// p1: nondigits 
// p2: digits 
// p3: non-alphanumerics
let regex = /([^\d]+)(\d+)([^\w]+)/;
// groups:   ╰─ p1 ─╯╰p2─╯╰─ p3 ─╯

//     offset ↴
//         012345678901234567
let str = '000abc12345#$*%xxx';
//         ╰─╯╰1╯╰─2─╯╰3─╯╰─╯
//          $`╰─ match ──╯ $'

// ⭐️ replacement: (replacer function)
let str2 = str.replace(regex, (
  match,            // matched substring = $&
  p1, p2, p3,       // capture groups = $1, $2, $3 ...
  offset,           // offset (index) of matched substring
  string,           // whole string
  groups            // "named" capturing groups (object)
) => {
  //                     3 ↴      undefined ↴
  log(match, p1, p2, p3, offset, string, groups);
  return '--' + ([p1, p2, p3].join('-')) + '--';
});

// str.replace()                            ╭─── replaced ───╮
log(str2);                           // "000--abc-12345-#$*%--xxx"
// ⭐️ 注意：不吻合的部分會原封不動留下來：     ╰⭐️╯                 ╰⭐️╯

// camel case to kebab case
let kebab = 'borderTop'.replace(/[A-Z]/g, (match, offset) => 
    (offset > 0 ? '-' : '') + match.toLowerCase()
);

log(kebab);           // "border-top"

💈範例：

// replace function
"the cia and fbi".replace(/\b(fbi|cia)\b/g, 
    match => match.toUpperCase()    // → the CIA and FBI
)

⭐️ 重點

因為 str.replace() 會對每個 match 進行指定的 replacer function 操作，所以如果我們只是要對每個 match 做某些動作，但不在乎代換後的文字，即可使用此方法。我們可以把這種做法當作是：str.match().forEach() 的捷徑，但又沒有 str.match().forEach() 的缺點，因為沒有 match 時，str.replace() 頂多就是不進行替換而已，並不會產生錯誤訊息。

當 str.match() 沒有結果時，會回傳 null，這時如果呼叫 .forEach() 會出現問題❗️

👥 相關

• str.match()

• RegExp ⟩ replace pattern

• str.replaceWhitespaces()

⬇️ 應用

• str.escapeHTML()

• str.kebabToCamelCase()

• codewars ⟩ most frequently used words in text ⭐️

📘 手冊

• encodeURI() ⭐️

• String ⟩

  • .match()

  • .replace() ⟩

    • replacer function