js replace正则相关的诡异问题

首先，我们需要了解replace方法是用于将一个字符串中的指定字符或正则表达式替换成新的字符串。在使用replace方法时，通常会用到正则表达式来匹配需要替换的字符串。

但是，在使用replace方法时，如果我们将正则表达式中的括号与g全局标记一起使用时，容易出现一些诡异的问题。下面，我将列举两个示例来说明这个问题。

示例一：

const str = '12345';
const result = str.replace(/(\d)/g, '$1*');
console.log(result); // 1*2*3*4*5*

在这个示例中，我们使用正则表达式/(\d)/g来匹配字符串中的所有数字，并将每个数字替换成$1的形式，即数字加上一个星号。正常情况下，我们得到的结果应该是字符串中的每个数字后面都跟着一个星号，即'12345'。

但是，在这个示例中，如果我们将正则表达式中的括号和g全局标记一起使用，我们将得到一个诡异的结果：'1122334455*'。可以看到，替换结果中每个数字都重复出现了两遍。

造成这种诡异问题的原因是，正则表达式中使用了括号，它会将括号中匹配到的字符保存在一个特殊的变量$1中。在通过replace方法进行替换时，如果使用$1来引用这个特殊变量，系统会将$1解析成字符串'1'，因此在替换结果中，每个数字都被重复出现了一遍。

要避免这个问题，我们可以将正则表达式中的括号去掉：

const str = '12345';
const result = str.replace(/\d/g, '$&*');
console.log(result); // 1*2*3*4*5*

在这个示例中，我们使用正则表达式/\d/g来匹配字符串中的所有数字，并将每个数字替换成$&*的形式，即数字加上一个星号。由于这个正则表达式中没有使用括号，因此我们无需关心$1变量的问题，可以正确地得到预期结果。

示例二：

const str = '<p>hello world</p>';
const result = str.replace(/<.+>/g, '');
console.log(result); // ''

在这个示例中，我们使用正则表达式/<.+>/g来匹配字符串中的所有HTML标签，并将它们替换成空字符串。但是，如果我们运行这个示例，得到的结果却是一个空字符串''，而不是预期的字符串'hello world'。

造成这个问题的原因是，正则表达式/<.+>/g是一个贪婪匹配，它会匹配尽可能多的字符，直到匹配到最后一个HTML标签。因此，在这个示例中，正则表达式会匹配到整个字符串'

hello world

'，并将它替换成空字符串，因此最终的结果是一个空字符串''。

要解决这个问题，我们可以使用一个非贪婪的正则表达式/<.+?>/g来匹配所有HTML标签：

const str = '<p>hello world</p>';
const result = str.replace(/<.+?>/g, '');
console.log(result); // 'hello world'

在这个示例中，我们使用正则表达式/<.+?>/g来匹配所有HTML标签，并将它们替换成空字符串。由于这个正则表达式是一个非贪婪匹配，它只会匹配到第一个HTML标签，并将它替换成空字符串，因此我们得到了预期的结果'hello world'。