JavaScript正则替换URL时&para转义异常的修复方法

问题根源 #

你遇到的&param2被转为¶m2的问题，本质是HTML解析器的实体自动解析行为：HTML预定义实体中&para对应段落符号¶，当处理后的URL字符串直接插入HTML上下文（比如通过innerHTML渲染、在富文本编辑器中显示）时，浏览器会把&para识别为实体并替换，和正则替换逻辑本身无关。

修复方案 #

方案1：对处理后的URL进行HTML转义

在将URL输出到HTML环境前，手动转义特殊字符，核心是把&替换为&，避免HTML解析器将其识别为实体开头。

代码示例：

// 原始输入URL
const inputUrl = 'google.com/q=abc?param1=[foo,bar]&optional=true&param2=[bar,baz]';

// 核心正则替换逻辑（提取数组参数的第一个值）
const processedUrl = inputUrl.replace(/\[([^,]+),.*?\]/g, '$1');

// HTML转义函数，处理特殊字符
function escapeHtml(str) {
  return str.replace(/&/g, '&')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
}

// 转义后再输出到HTML环境
const safeUrl = escapeHtml(processedUrl);
// 此时safeUrl为：google.com/q=abc?param1=foo&amp;optional=true&amp;param2=bar
// 浏览器渲染后会显示为正确的 &param2

方案2：改用URL API处理参数（更健壮）

正则处理URL容易出现边缘情况（比如参数值包含逗号、括号），使用浏览器原生的URL API处理参数更可靠，同时也能避免后续的实体问题（处理后的字符串为纯URL格式，转义后使用即可）。

代码示例：

const inputUrl = 'google.com/q=abc?param1=[foo,bar]&optional=true&param2=[bar,baz]';

// 补全协议（URL API要求完整URL）
const url = new URL('https://' + inputUrl);

// 遍历处理所有参数
for (const [key, value] of url.searchParams.entries()) {
  if (value.startsWith('[') && value.endsWith(']')) {
    // 提取数组中的第一个值
    const firstValue = value.slice(1, -1).split(',')[0];
    url.searchParams.set(key, firstValue);
  }
}

// 移除协议，还原原URL格式
const processedUrl = url.href.replace('https://', '');

// 如需在HTML环境使用，同样进行转义
const safeUrl = escapeHtml(processedUrl);

方案3：非HTML环境直接使用

如果你的代码是在Node.js后端、纯JS脚本（非浏览器DOM环境）中运行，这个实体解析问题不会出现，直接使用正则处理后的字符串即可。

内容的提问来源于stack exchange，提问作者Beautiful Pine