如何用JavaScript正则识别Markdown格式链接并转换为可点击a标签

核心实现代码 #

function mdLinkToAnchor(text) {
  // 全局匹配[标题](链接)格式的Markdown链接
  const linkReg = /\[([^\]]+)\]\(([^)]+)\)/g;
  return text.replace(linkReg, (match, title, url) => {
    // 安全校验：过滤恶意协议，防止XSS攻击
    const trimmedUrl = url.trim();
    const safeUrl = trimmedUrl.startsWith('javascript:') ? '#' : encodeURI(trimmedUrl);
    // 转义标题特殊字符，避免HTML注入
    const safeTitle = title.trim().replace(/[&<>"']/g, char => ({
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    })[char]);
    return `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer">${safeTitle}</a>`;
  });
}

使用示例 #

const inputStr = '这是测试内容[Google](https://www.google.com/) 其他普通文本';
const outputStr = mdLinkToAnchor(inputStr);
/* 输出结果：
这是测试内容<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">Google</a> 其他普通文本
*/

方案说明 #

• 正则/\[([^\]]+)\]\(([^)]+)\)/g通过两个捕获组分别提取链接标题和链接地址，g标识支持全局匹配所有符合规则的链接
• 新增的rel="noopener noreferrer"是前端安全规范要求，避免新开页面产生的权限泄露风险，可根据需求调整
• 注意你提供的示例代码中存在变量名写反的问题，上述方案按照常规业务逻辑（href属性填链接地址，标签内容填链接标题）实现，如果你确实需要调整展示逻辑，交换返回值中safeUrl和safeTitle的位置即可
• 内置的XSS防护逻辑适配公开场景的用户输入，如果你的使用场景仅处理完全可信的内部输入，可以直接使用简化版代码：

// 简化版（仅适用于可信输入场景）
const result = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');

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