跳到主要内容

JavaScript 字符串替换

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

基本字符串替换方法

1. replace() 方法

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

基本语法

javascript
string.replace(searchValue, replaceValue)

参数解释:

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

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

javascript
// 基本替换
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

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

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

javascript
// 忽略大小写替换
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() 方法的第二个参数可以是一个函数,这提供了更强大的替换能力:

javascript
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: 被检索的字符串
javascript
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() 方法,它可以替换字符串中所有匹配的子字符串,而不需要使用正则表达式:

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

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

javascript
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. 格式化文本

javascript
// 格式化电话号码
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内容清理

javascript
// 基本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. 模板字符串替换

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

javascript
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参数处理

javascript
// 向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. 预编译正则表达式:如果在循环中多次使用相同的正则表达式,应该在循环外预先编译它:
javascript
// 低效方式
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() 可能比正则表达式更快:
javascript
// 使用正则表达式
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的字符串替换功能。