[英]Regex replace url with links
I need a little help with some regex I have. 我需要一些正则表达式的帮助。 Basically I have a shout box that only shows text.
基本上我有一个只显示文字的喊话框。 I would like to replace urls with links and image urls with the image.
我想用图片替换带有链接和图片网址的网址。 I've got the basics working, it just when I try to name a link that I have problems, well if there is more than one link... check out the demo .
我已经掌握了基础知识,只是当我尝试命名有问题的链接时,如果链接不止一个,那么...请查看演示 。
Named link format {name}:url
should become <a href="url">name</a>
. 命名链接格式
{name}:url
应成为<a href="url">name</a>
。 The problem I am having is with shout #5 where the regex doesn't split the two urls properly. 我遇到的问题是喊#5,正则表达式没有正确分割两个网址。
HTML HTML
<ul>
<li>Shout #1 and a link to google: http://www.google.com</li>
<li>Shout #2 with an image: http://i201.photobucket.com/albums/aa236/Mottie1/SMRT.jpg</li>
<li>Shout #3 with two links: http://www.google.com and http://www.yahoo.com</li>
<li>Shout #4 with named link: {google}:http://www.google.com</li>
<li>Shout #5 with two named links: {google}:http://www.google.com and {yahoo}:http://www.yahoo.com and {google}:http://www.google.com</li>
</ul>
Script 脚本
var rex1 = /(\{(.+)\}:)?(http\:\/\/[\w\-\.]+\.[a-zA-Z]{2,3}(?:\/\S*)?(?:[\w])+)/g,
rex2 = /(http\:\/\/[\w\-\.]+\.[a-zA-Z]{2,3}(?:\/\S*)?(?:[\w])+\.(?:jpg|png|gif|jpeg|bmp))/g;
$('ul li').each(function(i){
var shout = $(this);
shout.html(function(i,h){
var p = h.split(rex1),
img = h.match(rex2),
typ = (p[2] !== '') ? '<a href="$3">$2</a>' : '<a href="$3">link</a>';
if (img !== null) {
shout.addClass('shoutWithImage')
typ = '<img src="' + img + '" alt="" />';
}
return h.replace(rex1, typ);
});
});
Update: I figured it out thanks to Brad helping me with the regex. 更新:我想通了布拉德帮助我使用正则表达式。 In case anyone needs it, here is the updated demo and code (Now works in IE!!):
如果有人需要它,这里是更新的演示和代码(现在在IE中工作!!):
var rex1 = /(\{(.+?)\}:)?(http:\/\/[\w\-\.]+\.[a-zA-Z]{2,3}(?:\/\S*)?(?:[\w])+)/g,
rex2 = /(http:\/\/[\w\-\.]+\.[a-zA-Z]{2,3}(?:\/\S*)?(?:[\w])+\.(?:jpg|png|gif|jpeg|bmp))/g;
$('ul li').each(function(i) {
var shout = $(this);
shout.html(function(i, h) {
var txt, url = h.split(' '),
img = h.match(rex2);
if (img !== null) {
shout.addClass('shoutWithImage');
$.each(img, function(i, image) {
h = h.replace(image, '<img src="' + image + '" alt="" />');
});
} else {
$.each(url, function(i, u) {
if (rex1.test(u)) {
txt = u.split(':')[0] || ' ';
if (txt.indexOf('{') >= 0) {
u = u.replace(txt + ':', '');
txt = txt.replace(/[\{\}]/g, '');
} else {
txt = '';
}
url[i] = '<a href="' + u + '">' + ((txt == '') ? 'link' : txt) + '</a>';
}
});
h = url.join(' ');
}
return h;
});
});
(\{(.+?)\}:)
you need the ?
您需要
?
to make the regex become "ungreedy" and not just find the next brace. 使正则表达式变得“不协调”,而不仅仅是找到下一个括号。
EDIT 编辑
However, if you remove the {yahoo}:
the second link becomes null too (seems to populate the anchor tag, just no attribute within). 但是,如果您删除
{yahoo}:
第二个链接也将变为空(似乎填充了定位标记,只是其中没有属性)。 This almost seems to be a victim of using a split instead of a replace. 这几乎似乎是使用拆分而不是替换的受害者。 I would almost recommend doing a once-over looking for links first, then go back around looking for images (I don't see any harm in off-linking directly to the image, unless that's not a desired result?)
我几乎建议您先做一次遍历的查找链接,然后再四处寻找图像(我不认为直接链接到图像没有任何危害,除非这不是理想的结果?)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.