JS中String之正则表达式replace方法详解

什么是正则表达式

正则表达式可以理解为是一种匹配文本模式的规则。使用正则表达式可以方便地进行文本操作，如查找、替换、匹配等。在JavaScript中，可以使用RegExp对象来表示正则表达式。

replace方法概述

字符串的replace()方法可以用来替换字符串中的文本。它可以接受两个参数，第一个参数是正则表达式或者字符串，指定要查找的内容；第二个参数是字符串或者函数，指定要替换的内容。它的基本用法如下：

str.replace(regexp|substr, newSubStr|function)

其中，regexp|substr表示要查找的内容，可以是一个字符串或者正则表达式，newSubStr|function表示要替换的内容，可以是一个字符串或者函数。如果第一个参数是字符串，则只会替换第一个匹配的内容；如果第一个参数是正则表达式，则会替换所有匹配的内容。

正则表达式作为第一个参数

当第一个参数是正则表达式时，replace()方法可以非常灵活地进行文本替换。

删除字符串中的所有空格

let str = " a b c ";
str = str.replace(/\s+/g, "");
console.log(str); //输出"abc"

在上述示例中，使用了正则表达式/\s+/g来查找字符串中的所有空格，g表示全局查找。使用空字符串来代替所有空格，就可以删除字符串中的所有空格了。

将电话号码格式化

let str = "12345678910";
str = str.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3");
console.log(str); //输出"123-4567-8910"

在上述示例中，使用了正则表达式/(\d{3})(\d{4})(\d{4})/来查找字符串中的电话号码。由于电话号码的格式是xxx-xxxx-xxxx的形式，因此使用了3个分组来匹配电话号码。在替换的时候，使用了$1、$2、$3来代表3个分组匹配到的内容，最终将电话号码格式化为了xxx-xxxx-xxxx的形式。

函数作为第二个参数

除了使用字符串来替换匹配到的文本之外，replace()方法还支持使用函数来自定义替换规则。当第二个参数是函数时，函数会被调用多次，每次传入一个匹配到的文本和匹配位置的信息。函数必须返回新的字符串，用来替换匹配到的文本。

大写字母转小写，小写字母转大写

let str = "AbCdef";
str = str.replace(/[A-Za-z]/g, function(match) {
  return /[a-z]/.test(match) ? match.toUpperCase() : match.toLowerCase();
});
console.log(str); //输出"aBcDEF"

在上述示例中，使用正则表达式/[A-Za-z]/g来匹配字符串中的所有字母，使用函数来将大写字母转成小写字母，将小写字母转成大写字母。在函数中，先使用/[a-z]/正则表达式来判断当前匹配到的字母是大写还是小写，如果是大写则调用toUpperCase()方法将其转成小写字母，如果是小写则调用toLowerCase()方法将其转成大写字母。这样就实现了大写字母转小写，小写字母转大写的效果。

将HTML标签转义

let str = "<div>hello world</div>";
str = str.replace(/[<>"&]/g, function(match) {
  return {
    "<": "&lt;", 
    ">": "&gt;", 
    "\"": "&quot;", 
    "&": "&amp;"
  }[match];
});
console.log(str); //输出"&lt;div&gt;hello world&lt;/div&gt;"

在上述示例中，使用正则表达式/[<>"&]/g来匹配字符串中的<、>、"、&符号，使用函数来将其转义。在函数中，使用一个对象来维护这4个符号和它们对应的转义字符，然后根据匹配到的符号返回相应的转义字符，实现了将HTML标签转义的效果。

总结

String的replace()方法是JavaScript中非常常用的一个方法，可以用来进行文本替换。当正则表达式作为第一个参数，可以灵活地进行文本匹配和替换；当函数作为第二个参数，可以用来自定义文本替换规则，非常方便实用。