腳本之家服務器常用軟件

快捷導航

JavaScript中string?replace高級用法詳解

更新時間：2026年02月06日 09:56:39 作者：無風聽海

replace()方法用于在字符串中用一些字符替換另一些字符,或替換一個與正則表達式匹配的子串,這篇文章主要介紹了JavaScript中string?replace高級用法的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1. 方法定義

str.replace(searchValue, replaceValue)

參數(shù)說明：

參數(shù)	類型	含義
searchValue	string 或 RegExp	被替換的目標
replaceValue	string 或 function	替換值，可以是字符串或回調(diào)函數(shù)

返回值：

返回一個新字符串
原字符串不改變

2. 基本用法

2.1 字符串替換（非正則）

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

?? 注意：

只替換第一個匹配
字符串模式不支持全局替換

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

2.2 正則替換

單次替換

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

默認只替換第一個匹配
使用正則可以匹配復雜模式

全局替換（g）

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

3. 字符串替換占位符

當 replaceValue 是字符串時，可以使用一些占位符：

占位符	含義	示例
`$&`	整個匹配字符串	`"abc123".replace(/\d+/, "[$&]")` → `"abc[123]"`
`$1…$n`	捕獲組	`"2026-01-15".replace(/(\d{4})-(\d{2})-(\d{2})/, "$2/$3/$1")` → `"01/15/2026"`
$`	匹配前的內(nèi)容	`"foo123bar".replace(/\d+/, "[$`]“)`→`"foo[foo]bar”`
`$'`	匹配后的內(nèi)容	`"foo123bar".replace(/\d+/, "[$']")` → `"foo[bar]bar"`
`$$`	字面 `$`	`"price=100".replace(/\d+/, "$$$&")` → `"price=$100"`

?? 工程注意：

$&, $``, $'` 可能影響性能
復雜邏輯最好用回調(diào)函數(shù)

4. 回調(diào)函數(shù)替換（推薦工程用法）

當 replaceValue 是函數(shù)時，每次匹配都會調(diào)用回調(diào)：

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

參數(shù)說明：

參數(shù)	含義
match	當前匹配的字符串（$&）
p1, p2 …	捕獲組（對應 $1, $2 …）
offset	match 在原字符串中的起始索引
string	原始字符串
groups	命名捕獲組對象（ES2018+）

示例 1：簡單回調(diào)替換

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

示例 2：捕獲組 + 條件替換

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"

示例 3：基于匹配位置替換

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

5. 正則復雜規(guī)則與注意事項

5.1 Alternation (|) 順序問題

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

規(guī)則：

從左到右匹配
第一個匹配成功的分支勝出
JS 不會自動選擇最長匹配

? 工程規(guī)范：

長模式放前面，短模式放后面

5.2 捕獲組

普通括號 () 會生成捕獲組
(?:) 不捕獲

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

5.3 多次匹配

全局 g 會掃描整個字符串
每次匹配成功后，指針會移動 match.length
零寬匹配（如 (?=x)) 會被強制 +1 防止死循環(huán)

5.4 用戶輸入安全

當用戶輸入用作正則：

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

6. 復雜示例：關(guān)鍵詞高亮（工程級）

function highlight(text, keywords) {
  // 長詞優(yōu)先
  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

特點：

長詞優(yōu)先 → 避免短詞覆蓋長詞
轉(zhuǎn)義用戶輸入 → 安全
回調(diào)函數(shù) → 可自由控制 HTML 或其他格式

7. 替換結(jié)構(gòu)化數(shù)據(jù)示例

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"}]