如何把JavaScript字符串中的所有文本链接转换成HTML超链接？

前端开发 2026-07-10

假设我有这样一个字符串：

var myText = "To get more help please click on our FAQ link at https://www.faqlink.com or talk to an agent now at https://www.agentlink.com";

每当字符串中出现链接时，我想把它转换成一个可点击的HTML链接，如下所示：

To get more help please click on our FAQ link at <a target="_blank" href="https://www.faqlink.com">https://www.faqlink.com</a> or talk to an agent now at <a target="_blank" href="https://www.agentlink.com">https://www.agentlink.com</a>

我知道我可以这样做：

myTest.replace('https', '<a href="https"');

但我的问题是在字符串中自动关闭所有链接标签。

解决方案

我知道有三种不同的方法可以选择，我都用过。

正则表达式（无依赖）

const myText = "To get more help please click on our FAQ link at https://www.faqlink.com or talk to an agent now at https://www.agentlink.com";

const result = myText.replace(
  /(https?:\/\/[^\s]+)/g,
  '<a target="_blank" rel="noopener noreferrer" href="$1">$1</a>'
);

console.log(result);

本质上，这个方法只是把它包裹在一个 <a> 中。

正则表达式（但Markdown风格）

const myText = "To get more help please click on our [https://www.faqlink.com](FAQ link) or talk to an agent now [https://www.agentlink.com](here)";

export const markdownLinks = (str) => str.replace(
  /\[([^\]]+)\]\((https?:\/\/)?([^)]+)\)/g,
  (_, label, protocol, url) => {
    const href = protocol ? protocol + url : "https://" + url;
    return `<a target="_blank" rel="noopener noreferrer" href="${href}">${label}</a>`;
  }
);

console.log(markdownLinks(myText));

我经常用Markdown，因此这一种很实用，容易直接放进一个工具文件里，一劳永逸地用上。

Autolinker（依赖）

我在我的项目中使用它，因为它让实现更干净一些，并且可扩展。

import Autolinker from "autolinker";

const myText = "To get more help please click on our FAQ link at https://www.faqlink.com or talk to an agent now at https://www.agentlink.com";

const result = Autolinker.link(myText, {
  newWindow: true
});

console.log(result);

快速提示：如果性能成为瓶颈（在大多数网页应用中并非如此），你需要使用除正则引擎之外的方案，因为成本会很高。大概可以考虑使用诸如while循环和重新生成字符串之类的方法。但这听起来不像你的使用场景，因为你已经在使用 .replace，所以我觉得你可以直接使用上述方法。

JavaScript