JavaScript中string replace高级用法详解

str.replace(searchValue, replaceValue)

let s = "hello world";
let r = s.replace("world", "JS");
console.log(r); // "hello JS"

"abcabc".replace("a", "X"); // "Xbcabc"（只替换第一个 a）

let s = "abc123";
let r = s.replace(/\d+/, "456");
console.log(r); // "abc456"

let s = "a1b2c3";
let r = s.replace(/\d/g, "X");
console.log(r); // "aXbXcX"

str.replace(regex, function(match, p1, p2, ..., offset, string, groups) { ... });

let s = "apple 123 banana 456";
let r = s.replace(/\d+/g, (match) => `[${match}]`);
console.log(r); // "apple [123] banana [456]"

let s = "2026-01-15";
let r = s.replace(/(\d{4})-(\d{2})-(\d{2})/, (match, year, month, day) => {
  return `${day}-${month}-${year}`;
});
console.log(r); // "15-01-2026"

let s = "foo123bar456";
let r = s.replace(/\d+/g, (match, offset) => {
  return offset < 6 ? `[${match}]` : `{${match}}`;
});
console.log(r); // "foo[123]bar{456}"

let s = "abc";
console.log(s.replace(/a|abc/, "X")); // "Xbc"
console.log(s.replace(/abc|a/, "X")); // "X"

let s = "abc123";
let r = s.replace(/([a-z]+)(\d+)/, "$2-$1");
console.log(r); // "123-abc"

function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function highlight(text, keywords) {
  // 长词优先
  keywords = [...keywords].sort((a,b)=>b.length - a.length);
  
  const regex = new RegExp(
    keywords.map(k => k.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|'),
    'gi'
  );

  return text.replace(regex, match => `<span class="highlight">${match}</span>`);
}

let result = highlight("11:22:22:33:44:55", ["11", "22", "33", "11:22:22"]);
console.log(result);
// <span class="highlight">11:22:22</span>:<span class="highlight">33</span>:44:55

let str = "key1=123;key2=456";
let pairs = [];
str.replace(/(\w+)=(\d+)/g, (_, key, value) => {
  pairs.push({ key, value });
});
console.log(pairs);
// [{key:"key1",value:"123"}, {key:"key2",value:"456"}]