replace函数使用方法详解 - 从基础语法到实战案例

replace函数的基本语法

replace()是JavaScript中常用的字符串处理方法，用于在字符串中执行查找替换操作。基本语法如下：

str.replace(searchValue, newValue)

参数说明

• searchValue：可以是字符串或正则表达式，表示要被替换的内容
• newValue：替换字符串或生成替换字符串的函数

replace函数的5种常见用法

1. 简单字符串替换

let str = 'Hello World';
let newStr = str.replace('World', 'JavaScript');
// 结果：'Hello JavaScript'

2. 使用正则表达式全局替换

let str = 'apple,orange,apple';
let newStr = str.replace(/apple/g, 'banana');
// 结果：'banana,orange,banana'

3. 使用函数作为替换参数

let str = 'price: 100';
let newStr = str.replace(/\d+/, function(match) {
  return parseInt(match) * 1.1;
});
// 结果：'price: 110'

4. 使用捕获组替换

let str = '2023-01-15';
let newStr = str.replace(/(\d{4})-(\d{2})-(\d{2})/, '$2/$3/$1');
// 结果：'01/15/2023'

5. 忽略大小写替换

let str = 'JavaScript is fun';
let newStr = str.replace(/javascript/i, 'TypeScript');
// 结果：'TypeScript is fun'

replace函数使用注意事项

1. replace()不会修改原字符串，而是返回新字符串
2. 默认只替换第一个匹配项，使用g标志进行全局替换
3. 当searchValue是字符串时，只替换第一个匹配项
4. 替换函数可以接收多个参数，包括匹配内容、捕获组等

实战应用案例

案例1：格式化电话号码

function formatPhone(phone) {
  return phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
}
formatPhone('13812345678'); // 138-1234-5678

案例2：HTML特殊字符转义

function escapeHtml(str) {
  return str.replace(/[&<>"']/g, function(match) {
    return {
      '&': '&',
      '<': '<',
      '>': '>',
      '"': '"',
      "'": '''
    }[match];
  });
}