如何编写一个 javascript 正则表达式来用 html 超链接替换这种格式 [*](*) 的超链接？

Question

我需要带有以下格式链接的解析文本：

[html title](http://www.htmlpage.com)
http://www.htmlpage.com
http://i.imgur.com/OgQ9Uaf.jpg

这两个字符串的输出是：

<a href='http://www.htmlpage.com'>html title</a>
<a href='http://www.htmlpage.com'>http://www.htmlpage.com</a>
<a href='http://i.imgur.com/OgQ9Uaf.jpg'>http://i.imgur.com/OgQ9Uaf.jpg</a>

字符串可以包含任意数量的这些链接，即：

[html title](http://www.htmlpage.com)[html title](http://www.htmlpage.com)
[html title](http://www.htmlpage.com)   [html title](http://www.htmlpage.com)
[html title](http://www.htmlpage.com) wejwelfj http://www.htmlpage.com

输出：

<a href='http://www.htmlpage.com'>html title</a><a href='http://www.htmlpage.com'>html title</a>
<a href='http://www.htmlpage.com'>html title</a>    <a href='http://www.htmlpage.com'>html title</a>
<a href='http://www.htmlpage.com'>html title</a> wejwelfj <a href='http://www.htmlpage.com'>http://www.htmlpage.com</a>

我有一个非常长的函数，它通过传递字符串 3 次来完成工作，但我无法成功解析这个字符串：

[This](http://i.imgur.com/iIlhrEu.jpg) one got me crying first, then once the floodgates were opened [this](http://i.imgur.com/IwSNFVD.jpg) one did it again and [this](http://i.imgur.com/hxIwPKJ.jpg). Ugh, feels. Gotta go hug someone/something.

为简洁起见，我将发布我尝试过的正则表达式，而不是整个查找/替换函数：

var matchArray2 = inString.match(/\[.*\]\(.*\)/g);

对于匹配[*](*)，不起作用，因为[]()[]() 已匹配

真的是这样，我猜。一旦我进行了匹配，我就会搜索匹配的 () 和 [] 以解析出链接和链接文本并构建 href 标记。我从临时字符串中删除了匹配项，因此当我第二次查找普通超链接时我不匹配它们：

var plainLinkArray = tempString2.match(/http\S*:\/\/\S*/g);

我没有用正则表达式解析任何 html。我正在解析一个字符串并尝试输出 html。

编辑：我添加了它在事后解析第三个链接http://i.imgur.com/OgQ9Uaf.jpg 的要求。

我的最终解决方案（基于@Cerbrus 的回答）：

function parseAndHandleHyperlinks(inString)
{
    var result = inString.replace(/\[(.+?)\]\((https?:\/\/.+?)\)/g, '<a href="$2">$1</a>');
    return result.replace(/(?: |^)(https?\:\/\/[a-zA-Z0-9/.(]+)/g, ' <a href="$1">$1</a>');     
}

Answer 1

试试这个正则表达式：

/\[(.+?)\]\((https?:\/\/[a-zA-Z0-9/.(]+?)\)/g

var s = "[html title](http://www.htmlpage.com)[html title](http://www.htmlpage.com)\n\
[html title](http://www.htmlpage.com)   [html title](http://www.htmlpage.com)\n\
[html title](http://www.htmlpage.com) wejwelfj http://www.htmlpage.com";

s.replace(/\[(.+?)\]\((https?:\/\/[a-zA-Z0-9/.(]+?)\)/g, '<a href="$2">$1</a>');

正则表达式解释：

# /                   - Regex Start
# \[                  - a `[` character (escaped)
# (.+?)               - Followed by any amount of words, grouped, non-greedy, so it won't match past:
# \]                  - a `]` character (escaped)
# \(                  - Followed by a `(` character (escaped)
# (https?:\/\/
#   [a-zA-Z0-9/.(]+?) - Followed by a string that starts with `http://` or `https://`
# \)                  - Followed by a `)` character (escaped)
# /g                  - End of the regex, search globally.

现在() / []中的2个字符串被捕获，并放在以下字符串中：

'<a href="$2">$1</a>';

这适用于您的“有问题”字符串：

var s = "[This](http://i.imgur.com/iIlhrEu.jpg) one got me crying first, then once the floodgates were opened [this](http://i.imgur.com/IwSNFVD.jpg) one did it again and [this](http://i.imgur.com/hxIwPKJ.jpg). Ugh, feels. Gotta go hug someone/something."
s.replace(/\[(.+?)\]\((https?:\/\/[a-zA-Z0-9/.(]+?)\)/g, '<a href="$2">$1</a>')

// Result:

'<a href="http://i.imgur.com/iIlhrEu.jpg">This</a> one got me crying first, then once the floodgates were opened <a href="http://i.imgur.com/IwSNFVD.jpg">this</a> one did it again and <a href="http://i.imgur.com/hxIwPKJ.jpg">this</a>. Ugh, feels. Gotta go hug someone/something.'

更多“错误”输入示例：

var s = "[Th][][is](http://x.com)\n\
    [this](http://x(.com)\n\
    [this](http://x).com)"
s.replace(/\[(.+?)\]\((https?:\/\/[a-zA-Z0-9/.(]+?)\)/g, '<a href="$2">$1</a>')

//   "<a href="http://x.com">Th][][is</a>
//    <a href="http://x(.com">this</a>
//    <a href="http://x">this</a>.com)"

你不能真的责怪最后一行的中断，因为没有办法知道用户是否打算在那里停止 url。

要捕获松散的网址，请添加以下内容：

.replace(/(?: |^)(https?\:\/\/[a-zA-Z0-9/.(]+)/g, ' <a href="$1">$1</a>');

(?: |^) 位捕获 String start 或 space 字符，因此它也会匹配以 url 开头的行。

Answer 2

str.replace(/\[(.*?)\]\((.*?)\)/gi, '<a href="$2">$1</a>');

这假定字符串中没有错误的括号或 URL 中的括号。

然后：

str.replace(/(\s|^)(https?:\/\/.*?)(?=\s|$)/gi, '$1<a href="$2">$2</a>')

这匹配一个类似“http”的 URL，该 URL 前面没有紧跟“”（之前的替换刚刚添加了该 URL）。当然，如果您有它，请随意使用更好的表达式。

编辑：我编辑了答案，因为我没有意识到 JS 没有后向语法。相反，您可以看到该表达式匹配任何空格 或 行的开头以匹配纯 http 链接。必须放回捕获的空间（因此是$1）。最后进行前瞻以确保捕获到下一个空格（或表达式末尾）的所有内容。如果空间对你来说不是一个好的边界，你将不得不想出一个更好的边界。

Answer 3

您似乎正在尝试将 Markdown 语法转换为 HTML。 Markdown 语法还没有一个规范（我指的是语法，而不是行为规范），所以你要蒙着眼睛四处走动，并尝试为你不想要的行为合并错误修复，所有的在重新发明轮子的同时。我建议您使用现有的实现而不是自己编写代码。例如，Pagedown 是 Markdown 的 JS 实现，目前在 StackOverflow 中使用。

如果您仍然需要正则表达式解决方案，以下是我的尝试。请注意，我不知道随着您的进步（如果您这样做的话），它是否会与 Markdown 的其他功能很好地配合。

/\[((?:[^\[\]\\]|\\.)+)\]\((https?:\/\/(?:[-A-Z0-9+&@#\/%=~_|\[\]](?= *\))|[-A-Z0-9+&@#\/%?=~_|\[\]!:,.;](?! *\))|\([-A-Z0-9+&@#\/%?=~_|\[\]!:,.;(]*\))+) *\)/i

上面的正则表达式应该捕获 [description](url) 链接样式的 Pagedown 行为的一部分（我不相信它会捕获所有内容，Pagedown 的源代码太复杂，无法一口气阅读）（标题不是支持的）。上面的正则表达式混合了 Pagedown 源代码中使用的 2 个不同的正则表达式。

一些功能：

• 捕获组 1 包含 [] 内的文本，捕获组 2 包含 URL。
• 允许在文本部分[] 中转义[ 和]，例如使用\ [a\[1\]](http://link.com)。不过，您需要做一些额外的处理。
• 允许 1 级 () 内部链接，在这种情况下非常有用：[String.valueOf](http://docs.oracle.com/javase/6/docs/api/java/lang/String.html#valueOf(double))
• 在链接之后和) 之前留出空格。

我没有考虑这个正则表达式中的裸链接。

参考：

• Coding Horror: The Future of Markdown