如何用JS的replaceAll替换React中HTML结构以集成Fancybox？

要通过JS的replaceAll完成目标替换，核心是用正则表达式匹配动态内容，并通过捕获组提取图片的src和alt属性值，再替换为Fancybox的组件结构。

具体实现代码 #

// 假设从API获取的原始HTML字符串
const apiHtml = '<div className="img-parent">\n    <img className="fancybox" src="path/to/image.jpg" alt="示例图片" />\n</div>';

// 执行替换
const transformedHtml = apiHtml.replaceAll(
  // 正则匹配目标结构，捕获src和alt的值
  /<div className="img-parent">\s*<img className='fancybox' src="([^"]+)" alt="([^"]+)" \/>/g,
  // 替换模板，用$1、$2引用捕获到的src和alt
  `<Fancybox options={{ infinite: false }}>
    <button
      data-fancybox="gallery"
      data-src={require("$1")}
      className="button button--secondary">
      <img className='fancybox' src={require("$1")} alt="$2" />
    </button>
  </Fancybox>`
);

关键说明 #

1. 正则表达式解析：

   • \s*：匹配img标签前后的换行、空格，兼容API返回的不同格式缩进
   • ([^"]+)：捕获src和alt属性的内容（匹配除双引号外的所有字符）
   • 全局标志g：确保替换所有符合条件的结构

2. 重要注意事项：

   • 若API返回的src包含特殊字符（如双引号），需要调整正则或提前转义，避免匹配失败
   • dangerouslySetInnerHTML仅能渲染原生HTML，无法解析React组件（如<Fancybox>）。如果直接渲染替换后的字符串，React会将<Fancybox>当作普通HTML标签处理，不会触发组件逻辑。若要使用React组件，建议先将API HTML解析为DOM节点，再手动转换为React元素，或使用第三方库完成转换。

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