正则替换误匹配新生成标签致结果异常，如何修复？

你的问题根源在于回调函数里的二次replace会意外匹配到新生成的<font>标签中的>字符，导致重复替换出错。我们可以通过直接利用正则分组一次性完成替换，避免嵌套的替换操作来解决这个问题。

修复后的代码 #

// 修正正则：添加g标志匹配所有标签，同时完善字符范围
var rox = /(<)([a-z0-9]+)(>)/g;
function testInfo(phoneInput){
  var startTag = "<font color='blue'>";
  var endTag = "</font>";
  // 利用正则分组直接拼接结果，避免二次替换
  var OK = phoneInput.value.replace(rox, function(_, lt, tagName, gt){
    return `${startTag}${lt}${endTag}${tagName}${startTag}${gt}${endTag}`;
  });
  // 记得返回处理后的结果（原代码缺少这一步）
  return OK;
}

为什么这样能解决问题？ #

1. 正则分组精准捕获：我们的正则/(<)([a-z0-9]+)(>)/g会把<p>拆成三个分组：
   • 第1组：<（表示左尖括号的转义字符）
   • 第2组：p（标签名）
   • 第3组：>（表示右尖括号的转义字符）
2. 一次性拼接结果：在replace的回调函数里，我们直接把三个分组按需求拼接——用font标签包裹<和>，中间保留原始标签名。整个过程只执行一次替换，不会触发对新生成的font标签内容的二次匹配。
3. 全局匹配（可选）：添加g标志可以处理字符串中的多个标签（比如<p><div>），如果只需要处理单个标签，可以去掉g。

原代码出错的原因 #

你在回调里对匹配到的整个字符串（比如<p>）执行了两次replace：

• 第一次替换<后，生成了包含>的font标签（比如<font color='blue'>...</font>）
• 第二次替换>时，会把这个新生成的>也当成目标替换，最终导致出现嵌套的font标签，得到错误结果。

内容的提问来源于stack exchange，提问作者AA Shakil