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

问题描述

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

I need the parse text with links in the following formats:

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

这两个字符串的输出为:

The output for those two strings would be:

<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>

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

The string could include an arbitrary amount of these links, ie:

[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 次完成了很好的工作，但我无法成功解析这个字符串:

I have an extremely long function that does an alright job by passing over the string 3 times, but I can't successfully parse this string:

[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.

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

For brevity, I'll post the regular expressions I've tried rather than the entire find/replace function:

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

为了匹配[*](*)，不起作用，因为[]()[]()是匹配的

for matching [*](*), doesn't work because []()[]() is matched

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

Really that's it, I guess. Once I make that match I search that match for () and [] to parse out the link an link text and build the href tag. I delete matches from a temp string so I don't match them when I do my second pass to find plain hyperlinks:

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

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

I'm not parsing any html with regex. I'm parsing a string and attempting to output html.

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

edit: I added the requirement that it parse the third link http://i.imgur.com/OgQ9Uaf.jpg after the fact.

我的最终解决方案(基于@Cerbrus 的回答):

my final solution (based on @Cerbrus's answer):

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>');
}

推荐答案

试试这个正则表达式:

/\[(.+?)\]\((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";

string.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个字符串被捕获，并放入如下字符串:

Now the 2 strings in the () / [] are captured, and placed in the following string:

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

这适用于您的有问题"的字符串:

This works for your "problematic" string:

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.'

更多带有不正确"输入的示例:

Some more examples with "Incorrect" input:

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.

You can't really blame the last line for breaking, since there's no way to know if the user meant to stop the url there, or not.

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

To catch loose urls, add this:

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

(?: |^) 位捕获 String start 或 space 字符，因此它也会匹配以网址.

The (?: |^) bit catches a String start or space character, so it'll also match lines starting with a url.

这篇关于如何编写 javascript 正则表达式来用 html 超链接替换这种格式 [*](*) 的超链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！