JavaScript Katana

JavaScript 字符串 replace() 方法详解：基础、正则表达式与实用示例

資料處理（字串、數值、日期、陣列、物件）
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. 介绍

JavaScript 是网页开发中使用最广泛的编程语言之一。尤其在处理用户输入和数据处理时，字符串操作是经常用到的功能。在这些功能中，replace() 方法 被称为一个强大的工具，能够轻松完成字符串替换操作。

本文将从基础到高级用法，全面讲解 JavaScript 的 replace() 方法。除了基础示例外，还会涉及使用正则表达式的高级替换以及实际项目中的实用案例。内容面向从初学者到中级开发者，帮助大家更好地掌握该方法。

2. replace() 方法基础

什么是 replace() 方法？

replace() 方法是 JavaScript 内置函数，用于将字符串中的特定部分替换为另一个字符串。使用该方法可以高效地编辑和转换字符串数据。

语法

string.replace(pattern, replacement)
  • pattern ：要搜索的字符串或正则表达式。
  • replacement ：替换的字符串或回调函数。

基本用法

下面的示例演示了一个简单的字符串替换。

let text = "Hello, world!";
let result = text.replace("world", "JavaScript");
console.log(result); // "Hello, JavaScript!"

在这段代码中，字符串 “world” 被替换为 “JavaScript”。

注意事项

  1. replace() 只会替换第一次匹配到的内容。
  2. 若要替换所有匹配项，需要使用带有 g 标志的正则表达式。

3. 使用正则表达式的高级替换

正则表达式是什么？

正则表达式是描述字符串模式的强大工具。在 JavaScript 中，正则表达式让你能够轻松实现复杂的模式匹配和替换操作。

使用正则表达式的替换示例

let text = "apple, banana, apple";
let result = text.replace(/apple/g, "orange");
console.log(result); // "orange, banana, orange"

标志类型

  • g ：全局替换（替换所有匹配）
  • i ：不区分大小写的替换
  • m ：多行模式

高级示例：不区分大小写的替换

let text = "Hello, hello, HELLO";
let result = text.replace(/hello/gi, "hi");
console.log(result); // "hi, hi, hi"

4. 替换多个出现位置

替换所有匹配项

要在字符串中替换所有匹配的出现位置，只需在正则表达式中使用 g 标志。

let text = "cat dog cat bird";
let result = text.replace(/cat/g, "fish");
console.log(result); // "fish dog fish bird"

一次性替换多个不同字符串的技巧

let text = "red blue green";
let replacements = {red: "pink", blue: "cyan", green: "lime"};

Object.keys(replacements).forEach(key => {
  let regex = new RegExp(key, "g");
  text = text.replace(regex, replacements[key]);
});

console.log(text); // "pink cyan lime"

这种做法可以一次性替换多个模式，同时提升代码可读性。

5. 使用回调函数进行动态替换

什么是回调函数？

回调函数在替换过程中被调用，允许你利用当前匹配信息自定义替换操作。

动态替换示例

1. 重新排列字符串

let text = "Tanaka, Taro";
let result = text.replace(/(\w+), (\w+)/, (match, p1, p2) => {
  return `${p2} ${p1}`;
});
console.log(result); // "Taro Tanaka"

2. 转换日期格式

let date = "2024-12-25";
let formattedDate = date.replace(/(\d{4})-(\d{2})-(\d{2})/, (match, year, month, day) => {
  return `${month}/${day}/${year}`;
});
console.log(formattedDate); // "12/25/2024"

6. 处理特殊字符和转义序列

什么是特殊字符？

在正则表达式中，某些字符具有 元字符 的特殊含义。要在搜索或替换操作中将这些字符按字面意义使用，必须使用 转义序列。

替换包含特殊字符的字符串

示例 1：替换包含句点的字符串

let text = "www.example.com";
let result = text.replace(/\./g, "-");
console.log(result); // "www-example-com"

示例 2：去除美元符号

let price = "$1,000";
let result = price.replace(/\$/g, "");
console.log(result); // "1,000"

替换 HTML 转义字符

示例：转义 HTML 标签

let html = "<div>Hello!</div>";
let result = html.replace(/</g, "&lt;").replace(/>/g, "&gt;");
console.log(result);
// "&lt;div&gt;Hello!&lt;/div&gt;"

7. 实际用例与高级技巧

将换行符转换为 <br> 标签

let text = "Hello\nWorld\nJavaScript";
let result = text.replace(/\n/g, "<br>");
console.log(result);
// "Hello<br>World<br>JavaScript"

操作 URL 参数

let url = "https://example.com/?id=123&lang=en";
let result = url.replace(/lang=en/, "lang=ja");
console.log(result);
// "https://example.com/?id=123&lang=ja"

对用户输入进行消毒

function sanitizeInput(input) {
  return input.replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

let userInput = "<script>alert('XSS');</script>";
let safeInput = sanitizeInput(userInput);
console.log(safeInput);
// "&lt;script&gt;alert('XSS');&lt;/script&gt;"

8. 重要注意事项与最佳实践

注意仅替换第一次匹配

let text = "apple apple orange";
let result = text.replace("apple", "banana");
console.log(result); // "banana apple orange"

注意大小写敏感性

let text = "JavaScript is powerful. javascript is versatile.";
let result = text.replace(/javascript/gi, "JS");
console.log(result);
// "JS is powerful. JS is versatile."

别忘了转义特殊字符

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

let text = "Price: $100";
let result = text.replace(new RegExp(escapeRegExp("$"), "g"), "USD ");
console.log(result);
// "Price: USD 100"

9. 结论

文章摘要

  • 基本用法： 解释了 replace() 方法的语法及其简单示例。
  • 正则表达式应用： 介绍了如何使用正则表达式及其标志进行高级替换操作。
  • 回调函数： 通过实际案例演示了动态替换技术。
  • 实用示例： 引入了 URL 操作和输入消毒等有用技巧。
  • 最佳实践： 阐述了重要的注意事项及性能相关的考量。

最后思考

JavaScript 的 replace() 方法是一种多功能且强大的工具，能够在从基础到高级的各种场景中高效使用。我们将继续提供有价值的 JavaScript 相关内容，敬请关注。

広告