🔰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() 會出現問題❗️
encodeURI() ⭐️
String ⟩
.replace() ⟩
Last updated