我需要带有以下格式链接的解析文本:
[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>');
}
最佳答案
试试这个正则表达式:
/\[(.+?)\]\((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 开头的行。
关于javascript - 如何编写一个 javascript 正则表达式来用 html 超链接替换这种格式 [*](*) 的超链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14599071/