如何对字符串中除<a>标签外的所有HTML内容进行转义？

问题分析 #

你当前的转义函数会把所有<和>转义成实体字符，包括合法的<a>链接标签，导致链接无法正常渲染。需要修改逻辑，实现除了标签（含属性）之外，其余所有HTML内容都被转义。

解决方案 #

修改转义函数，先全量转义所有HTML，再将转义后的<a>相关内容还原为真实标签：

const escapeHtmlExceptLinks = (unsafe) => {
  // 第一步：转义所有HTML字符
  let escaped = unsafe.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
  // 第二步：还原带属性的<a>起始标签
  escaped = escaped.replace(/&lt;a([^&]+)&gt;/g, '<a$1>');
  // 第三步：还原</a>结束标签
  escaped = escaped.replaceAll('&lt;/a&gt;', '</a>');
  return escaped;
};

使用示例 #

替换原代码中的escapeHtml为新函数即可：

message.innerHTML = escapeHtmlExceptLinks(json.username) + ":<br/>" + escapeHtmlExceptLinks(json.message);

注意事项 #

如果你的链接自动转换逻辑（把纯文本链接转成<a>标签）是在转义之后执行，需要调整顺序：先完成链接转<a>的操作，再调用该转义函数，避免<a>被先转义再还原的多余步骤。

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