我需要包含以下格式链接的解析文本:
[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>');
}
答案 0 :(得分:3)
试试这个正则表达式:
/\[(.+?)\]\((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个字符串,并将其放在以下字符串中:
'<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)"
你不能真的责怪最后一行是否违规,因为没有办法知道用户是否打算在那里停止网址。
要捕获松散的网址,请添加以下内容:
.replace(/(?: |^)(https?\:\/\/[a-zA-Z0-9/.(]+)/g, ' <a href="$1">$1</a>');
(?: |^)
位会捕获String start
或space
字符,因此它也会匹配以网址开头的行。
答案 1 :(得分:2)
str.replace(/\[(.*?)\]\((.*?)\)/gi, '<a href="$2">$1</a>');
这假设URL中的字符串或括号中没有错误的括号。
然后:
str.replace(/(\s|^)(https?:\/\/.*?)(?=\s|$)/gi, '$1<a href="$2">$2</a>')
这匹配一个类似“http”的URL,它不会立即以“(之前的替换就已经添加了)”。当然,如果你拥有它,可以随意使用更好的表达式。
编辑:我编辑了答案,因为我没有意识到JS没有外观语法。相反,您可以看到表达式匹配任何空格或行的开头以匹配普通http
链接。必须放回捕获的空间(因此$1
)。最后的一个前瞻是确保捕获到下一个空格(或表达式的结尾)的所有内容。如果空间对你来说不是一个好的边界,你将不得不想出一个更好的边界。
答案 2 :(得分:2)
您似乎正在尝试将Markdown语法转换为HTML。 Markdown语法还没有规范(我指的是语法,而不是行为规范),因此你将被蒙住眼睛走动并尝试将bug修复程序纳入你不想要的行为,所有这些在重新发明轮子的同时。我建议您使用现有的实现,而不是自己编写。例如,Pagedown是Markdown的JS实现,目前在StackOverflow中使用。
如果你仍然想要一个正则表达式解决方案,下面是我的尝试。请注意,我不知道当你进步时它是否会与Markdown的其他功能很好地配合(如果你这样做的话)。
/\[((?:[^\[\]\\]|\\.)+)\]\((https?:\/\/(?:[-A-Z0-9+&@#\/%=~_|\[\]](?= *\))|[-A-Z0-9+&@#\/%?=~_|\[\]!:,.;](?! *\))|\([-A-Z0-9+&@#\/%?=~_|\[\]!:,.;(]*\))+) *\)/i
上面的正则表达式应该捕获一些部分(我不相信它捕获所有内容,Pagedown的源代码太复杂,无法一次读取)Pagedown for [description](url)
链接样式的行为(标题不支持)。上面的正则表达式混合了Pagedown源代码中使用的2个不同的正则表达式。
一些功能:
[]
内的文本,捕获组2包含URL。[
,例如,允许在文本部分]
内转义[]
和\
[a\[1\]](http://link.com)
。但是,你需要做一些额外的处理。()
内部链接,在以下情况下非常有用:[String.valueOf](http://docs.oracle.com/javase/6/docs/api/java/lang/String.html#valueOf(double))
)
之前留出空格。我没有考虑这个正则表达式中的裸链接。
参考: