javascript - 如何用链接替换纯URL？(How to replace plain URLs with links?)

Question

I am using the function below to match URLs inside a given text and replace them for HTML links.

(我正在使用下面的功能来匹配给定文本内的URL，并将其替换为HTML链接。)

The regular expression is working great, but currently I am only replacing the first match.

(正则表达式效果很好，但目前我仅替换第一场比赛。)

How I can replace all the URL?

(如何替换所有URL？)

I guess I should be using the exec command, but I did not really figure how to do it.

(我想我应该使用exec命令，但是我没有真正弄清楚该怎么做。)

function replaceURLWithHTMLLinks(text) {
    var exp = /((https?|ftp|file)://[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/i;
    return text.replace(exp,"<a href='$1'>$1</a>"); 
}

  ask by Sergio del Amo translate from so

Answer 1

First off, rolling your own regexp to parse URLs is a terrible idea .

(首先，滚动自己的regexp来解析URL是一个糟糕的主意 。)

You must imagine this is a common enough problem that someone has written, debugged and tested a library for it, according to the RFCs .

(您必须想象这是一个非常普遍的问题，根据RFC ，有人为此编写，调试和测试了一个库。)

URIs are complex - check out the code for URL parsing in Node.js and the Wikipedia page on URI schemes .

(URI非常复杂 -请在Node.js和URI方案的Wikipedia页面上查看用于URL解析的代码 。)

There are a ton of edge cases when it comes to parsing URLs: international domain names , actual ( .museum ) vs. nonexistent ( .etc ) TLDs, weird punctuation including parentheses , punctuation at the end of the URL, IPV6 hostnames etc.

(解析URL时有很多边缘情况： 国际域名 ，实际（ .museum ）与不存在（ .etc ）TLD，包含括号的怪异标点，URL末尾的标点，IPV6主机名等。)

I've looked at a ton of libraries , and there are a few worth using despite some downsides:

(我已经看了一吨的图书馆 ，并有几个值得使用，尽管一些缺点：)

• Soapbox's linkify has seen some serious effort put into it, and a major refactor in June 2015 removed the jQuery dependency .

  (Soapbox的linkify已经投入了很多精力，并且在2015年6月的重大重构中 删除了jQuery依赖项 。)

  It still has issues with IDNs .

  (它仍然存在IDN问题 。)

• AnchorMe is a newcomer that claims to be faster and leaner.

  (AnchorMe是一个新手， 声称更快 ，更精简。)

  Some IDN issues as well.

  (还有一些IDN问题 。)

• Autolinker.js lists features very specifically (eg "Will properly handle HTML input. The utility will not change the href attribute inside anchor () tags" ).

  (Autolinker.js非常详细地列出了功能（例如“将正确处理HTML输入。该实用程序将不会更改anchor（）标记内的href属性” ）。)

  I'll thrown some tests at it when a demo becomes available .

  (演示可用时我会对其进行一些测试。)

Libraries that I've disqualified quickly for this task:

(我已迅速被取消此任务资格的图书馆：)

• Django's urlize didn't handle certain TLDs properly (here is the official list of valid TLDs . No demo .

  (Django的urlize 不能正确处理某些TLD （这是有效TLD的正式列表 。 没有演示 。)

• autolink-js wouldn't detect "www.google.com" without http://, so it's not quite suitable for autolinking "casual URLs" (without a scheme/protocol) found in plain text.

  (如果没有http：//， autolink-js不会检测到“ www.google.com”，因此它不适合自动链接以纯文本形式出现的“休闲URL”（无方案/协议）。)

• Ben Alman's linkify hasn't been maintained since 2009.

  (自2009年以来一直没有维护本·阿尔曼（Ben Alman）的linkify 。)

If you insist on a regular expression, the most comprehensive is the URL regexp from Component , though it will falsely detect some non-existent two-letter TLDs by looking at it.

(如果您坚持使用正则表达式，则最全面的是Component的URL regexp ，尽管它会通过查看错误地检测出一些不存在的两个字母的TLD。)