跳到主要内容

JavaScript 字符串替换

字符串替换是日常编程中的常见需求，无论是处理用户输入、格式化显示内容，还是数据清洗，都会用到字符串替换功能。JavaScript提供了多种方法来实现字符串替换，本文将详细介绍这些方法及其适用场景。

基本字符串替换方法​

1. replace() 方法​

replace() 方法是JavaScript中最基本的字符串替换方法，它返回一个新字符串，并不会修改原字符串。

基本语法​

string.replace(searchValue, replaceValue)

参数解释：

  • searchValue：被替换的字符串或正则表达式
  • replaceValue：用来替换的字符串或函数

让我们通过几个例子来了解这个方法：

// 基本替换
const str = "Hello World";
const newStr = str.replace("World", "JavaScript");
console.log(newStr); // 输出: Hello JavaScript
console.log(str);    // 输出: Hello World (原字符串不变)

// 只替换第一次出现的匹配项
const repeatStr = "apple apple apple";
const result = repeatStr.replace("apple", "orange");
console.log(result); // 输出: orange apple apple
备注

使用字符串作为第一个参数时，replace() 方法仅替换第一个匹配项。

2. 使用正则表达式进行替换​

如果要替换字符串中的所有匹配项，可以使用正则表达式和全局标志 g：

const repeatStr = "apple apple apple";
const result = repeatStr.replace(/apple/g, "orange");
console.log(result); // 输出: orange orange orange

使用正则表达式还可以实现更复杂的替换：

// 忽略大小写替换
const text = "JavaScript is awesome. JAVASCRIPT is fun.";
const caseInsensitive = text.replace(/javascript/gi, "JS");
console.log(caseInsensitive); // 输出: JS is awesome. JS is fun.

// 使用正则捕获组
const name = "Smith, John";
const swapped = name.replace(/(\w+), (\w+)/, "$2 $1");
console.log(swapped); // 输出: John Smith

高级替换技巧​

1. 使用函数作为替换值​

replace() 方法的第二个参数可以是一个函数，这提供了更强大的替换能力：

const prices = "Price: $10, $25, and $40";
const convertToCNY = prices.replace(/\$(\d+)/g, function(match, amount) {
  return "¥" + (amount * 7.2).toFixed(2);
});
console.log(convertToCNY); // 输出: Price: ¥72.00, ¥180.00, and ¥288.00

替换函数可以接收多个参数：

  1. match: 匹配的子串
  2. p1, p2, ...: 捕获组匹配的字符串
  3. offset: 匹配到的子字符串在原字符串中的偏移量
  4. string: 被检索的字符串
const text = "Hello planet earth!";
const result = text.replace(/(\w+) (\w+) (\w+)/, function(match, p1, p2, p3, offset, string) {
  return `${p1.toUpperCase()} ${p2} ${p3}!`;
});
console.log(result); // 输出: HELLO planet earth!

2. replaceAll() 方法​

ES2021引入了 replaceAll() 方法，它可以替换字符串中所有匹配的子字符串，而不需要使用正则表达式：

const repeatStr = "apple apple apple";
const result = repeatStr.replaceAll("apple", "orange");
console.log(result); // 输出: orange orange orange

如果使用正则表达式作为第一个参数，仍然需要全局标志 g：

const text = "I like apples and APPles";
// 正确用法 - 使用了全局标志
const result1 = text.replaceAll(/apples/gi, "oranges");
console.log(result1); // 输出: I like oranges and oranges

// 错误用法 - 没有使用全局标志会抛出错误
// const result2 = text.replaceAll(/apples/i, "oranges"); // 错误!
警告

replaceAll() 在较旧的浏览器中可能不被支持，在使用前请确保目标环境支持此方法或提供适当的 polyfill。

实际应用场景​

1. 格式化文本​

// 格式化电话号码
function formatPhoneNumber(phoneNumber) {
  // 移除所有非数字字符
  const cleaned = phoneNumber.replace(/\D/g, "");
  // 格式化为 (XXX) XXX-XXXX
  const formatted = cleaned.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
  return formatted;
}

console.log(formatPhoneNumber("1234567890")); // 输出: (123) 456-7890
console.log(formatPhoneNumber("123-456-7890")); // 输出: (123) 456-7890

2. HTML内容清理​

// 基本HTML标签去除
function stripHtml(html) {
  return html.replace(/<[^>]*>/g, "");
}

const htmlContent = "<p>Hello <b>World</b>!</p>";
console.log(stripHtml(htmlContent)); // 输出: Hello World!

// 转义HTML特殊字符
function escapeHtml(text) {
  const replacements = {
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    "\"": "&quot;",
    "'": "&#039;"
  };
  
  return text.replace(/[&<>"']/g, char => replacements[char]);
}

console.log(escapeHtml("<script>alert('XSS')</script>")); 
// 输出: &lt;script&gt;alert(&#039;XSS&#039;)&lt;/script&gt;

3. 模板字符串替换​

使用替换实现简单的模板引擎：

function renderTemplate(template, data) {
  return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
    return data[key] || match;
  });
}

const template = "Hello {{name}}! Your order #{{orderId}} has been {{status}}.";
const data = {
  name: "John",
  orderId: "12345",
  status: "shipped"
};

console.log(renderTemplate(template, data));
// 输出: Hello John! Your order #12345 has been shipped.

4. URL参数处理​

// 向URL添加或更新查询参数
function updateUrlParam(url, param, value) {
  // 检查URL是否已包含参数
  const pattern = new RegExp(`([?&])${param}=.*?(&|$)`, "i");
  const separator = url.includes("?") ? "&" : "?";
  
  if (url.match(pattern)) {
    // 参数已存在，更新它
    return url.replace(pattern, `$1${param}=${value}$2`);
  } else {
    // 参数不存在，添加它
    return `${url}${separator}${param}=${value}`;
  }
}

console.log(updateUrlParam("https://example.com", "page", "2"));
// 输出: https://example.com?page=2

console.log(updateUrlParam("https://example.com?sort=name", "page", "2"));
// 输出: https://example.com?sort=name&page=2

console.log(updateUrlParam("https://example.com?page=1", "page", "2"));
// 输出: https://example.com?page=2

性能考虑​

当进行大量字符串替换操作时，性能可能成为一个关注点。下面是一些提高字符串替换性能的技巧：

  1. 预编译正则表达式：如果在循环中多次使用相同的正则表达式，应该在循环外预先编译它：
// 低效方式
function processStrings(strings) {
  return strings.map(str => str.replace(/\d+/g, "NUM"));
}

// 更高效方式
function processStringsOptimized(strings) {
  const regex = /\d+/g;
  return strings.map(str => str.replace(regex, "NUM"));
}
  1. 适当使用字符串方法替代正则表达式：对于简单的替换，使用 split() 和 join() 可能比正则表达式更快：
// 使用正则表达式
const result1 = "a,b,c,d".replace(/,/g, "-");

// 使用split和join
const result2 = "a,b,c,d".split(",").join("-");

总结​

JavaScript提供了强大的字符串替换功能，从基本的 replace() 方法到ES2021引入的 replaceAll()，再到结合正则表达式和替换函数的高级用法。掌握这些技术能帮助你高效地处理各种文本操作任务。

关键知识点回顾：

  1. replace() 方法默认只替换第一个匹配项
  2. 使用正则表达式和全局标志 g 可以替换所有匹配项
  3. replaceAll() 方法可以替换所有匹配的字符串，无需正则表达式
  4. 替换函数提供了强大的自定义替换功能
  5. 在处理大量数据时需关注性能优化

练习题​

为了巩固所学内容，尝试解决以下练习题：

  1. 编写一个函数，将输入字符串中的所有数字替换为 [数字]，例如 "I am 25 years old" 变为 "I am [25] years old"。
  2. 实现一个函数，用于将驼峰命名法转换为短横线命名法，例如 "backgroundColor" 转换为 "background-color"。
  3. 创建一个函数，它能够遮蔽信用卡号码中间的数字，只显示前四位和后四位，例如 "1234567890123456" 变为 "1234********3456"。
提示

解决练习题时，考虑多种可能的解决方案，并思考哪种方法在效率和可读性方面更优。

进一步学习资源​

掌握字符串替换是处理文本数据的基础技能，希望本文能帮助你更好地理解和应用JavaScript的字符串替换功能。