React中如何识别文本链接并正确渲染Markdown格式超链接

你当前的正则只匹配了裸URL地址，没有识别Markdown格式的[链接文本](链接地址)语法，需要调整正则匹配优先级，优先解析Markdown链接格式，再处理普通裸链接。

具体修改步骤 #

• 第一步：优先匹配Markdown链接语法，使用正则/\[([^\]]+)\]\(([^)]+)\)/g捕获链接文本和对应的链接地址，替换为带正确属性的a标签。
• 第二步：如果需要同时支持裸URL自动转链接，可以在处理完Markdown链接之后，再用你原来的正则匹配剩余的独立URL做转换。
• 第三步：给所有外部链接增加rel="nofollow noreferrer noopener"属性，避免新页面跳转的安全风险，也符合你预期的输出要求。

修改后的完整代码 #

// 处理文本链接转换
urlify(text) {
  // 先处理Markdown格式的链接 [text](url)
  const mdLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
  let processedText = text.replace(mdLinkRegex, (match, linkText, url) => {
    return `<a href="${url}" target="_blank" rel="nofollow noreferrer noopener">${linkText}</a>`;
  });

  // 如果需要支持裸URL自动转链接，保留下面这段逻辑，不需要可直接删除
  const rawUrlRegex = new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@)?([a-zA-Z0-9.-]+\\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?", "g");
  processedText = processedText.replace(rawUrlRegex, (url) => {
    // 避免重复替换已经在a标签里的URL
    if (processedText.includes(`href="${url}"`)) return url;
    return `<a href="${url}" target="_blank" rel="nofollow noreferrer noopener">${url}</a>`;
  });

  return processedText;
}

render() {
  let description = "this is my [web](http://stackoverflow.com), this is [Google](https://www.google.com/)"
  return (
    <p dangerouslySetInnerHTML={{__html: this.urlify(description)}}></p>
  );
}

注意事项 #

• 以上代码的裸URL替换加了简单的去重判断，避免已经封装到a标签里的URL被二次替换。如果业务对安全要求高，建议使用成熟的React Markdown解析组件替代手动正则处理，降低XSS注入风险。
• 如果你的业务场景只需要处理Markdown格式的链接，不需要自动识别裸URL，可以直接删除裸URL匹配的相关代码，减少逻辑复杂度。

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