如何用纯JavaScript将JSON数组中的邮箱转为HTML锚标签？

好的，我来帮你搞定这个需求——不用React Linkify，纯JS就能把文本里的邮箱地址转换成可点击的锚标签，同时完美适配React的JSX渲染场景。

方法一：安全生成React元素（推荐） #

这种方式不需要使用dangerouslySetInnerHTML，直接生成React节点，从根源避免XSS风险，是React项目里的首选方案。

步骤1：编写处理函数 #

我们用正则匹配邮箱地址，把原文本拆分成普通文本和邮箱片段，然后分别渲染成文本节点和<a>标签：

function renderTextWithLinks(text) {
  // 匹配邮箱的正则表达式，覆盖绝大多数标准邮箱格式
  const emailRegex = /([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/g;
  // 按邮箱分割文本，得到包含普通文本和邮箱的数组
  const parts = text.split(emailRegex);

  // 遍历分割后的数组，返回对应的React元素
  return parts.map((part, index) => {
    // 判断当前片段是否是邮箱地址
    if (emailRegex.test(part)) {
      return (
        <a key={index} href={`mailto:${part}`} style={{ color: 'blue', textDecoration: 'underline' }}>
          {part}
        </a>
      );
    }
    // 普通文本直接返回
    return part;
  });
}

步骤2：在React渲染中使用 #

把原来的<Linkify>替换成这个函数的调用即可：

General.map((faq, index) => (
  <details key={index}>
    <summary>{faq.question}</summary>
    <div>
      {renderTextWithLinks(faq.answer)}
    </div>
  </details>
))

方法二：使用innerHTML（不推荐，存在安全风险） #

如果你确定文本内容完全可控（没有用户输入的恶意代码），也可以用字符串替换的方式生成HTML，再通过dangerouslySetInnerHTML插入到DOM中：

步骤1：编写转换函数 #

function convertEmailToLink(text) {
  const emailRegex = /([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/g;
  // 把匹配到的邮箱替换成带mailto协议的锚标签
  return text.replace(emailRegex, '<a href="mailto:$1">$1</a>');
}

步骤2：在JSX中使用 #

General.map((faq, index) => (
  <details key={index}>
    <summary>{faq.question}</summary>
    <div dangerouslySetInnerHTML={{ __html: convertEmailToLink(faq.answer) }} />
  </details>
))

⚠️ 注意：dangerouslySetInnerHTML会直接解析并插入HTML，若文本包含用户输入的恶意代码，会导致XSS攻击，所以仅在内容完全可信时使用。

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