ReactJS: 查找字符串中的HTML标签并检查是否已使用反引号包裹

方案1：正则匹配批量处理（适合快速批量修改原始字符串） #

你可以通过正则拆分区分已被反引号包裹的内容和普通文本，仅对普通文本内的HTML标签做补包裹处理，逻辑如下：

• 第一步：用正则把原字符串拆分为「反引号包裹的代码段」和「普通文本段」两部分
• 第二步：针对普通文本段，匹配所有<[^>]+>格式的HTML标签，给每个匹配结果前后补充反引号
• 第三步：把处理后的普通文本段和原始代码段按原有顺序拼接还原

示例JS实现代码：

function wrapUnquotedHtmlTags(str) {
  // 用捕获组拆分字符串，保留反引号包裹的片段
  const parts = str.split(/(`[^`]+`)/g);
  return parts.map(part => {
    // 已经是反引号包裹的内容直接返回不处理
    if (part.startsWith('`') && part.endsWith('`')) return part;
    // 仅处理普通文本中的HTML标签
    return part.replace(/<[a-zA-Z][^>]*>/g, match => `\`${match}\``);
  }).join('');
}

注意：如果你的内容中存在嵌套反引号、或者HTML标签内部带>的特殊场景，可以调整标签匹配规则缩小范围，避免误匹配非标签类的<>内容。

方案2：DOM安全渲染兜底（仅需前端展示时优先选这个方案） #

如果不需要修改原始字符串，只是要避免浏览器解析错误，你可以直接用DOM原生的文本渲染接口，完全绕开HTML解析逻辑：

• 直接把内容赋值给元素的innerText属性，浏览器会自动把所有标签识别为纯文本渲染，不会触发HTML解析，也不会报标签闭合错误
• 如果需要保留原有格式（比如换行、已有反引号包裹的代码样式），可以先做HTML转义再渲染：

function escapeHtml(str) {
  return str.replace(/[&<>"']/g, char => ({
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;'
  })[char]);
}

转义完成后，再把你需要保留样式的反引号代码段替换为带<code>标签的格式即可。

注意事项 #

• 不要全局替换所有<为<，会破坏原有已经用反引号包裹的代码段格式
• 正则匹配HTML标签时不要用过于宽松的规则，避免把内容中<>包裹的非标签内容（比如数学表达式、占位符）误处理

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