javascript - 正则表达式用链接替换网址

Question

我需要一些关于我拥有的正则表达式的帮助。基本上我有一个只显示文本的留言框。我想用链接替换 ​​url，用图像替换图像 url。我已经掌握了基础知识，只是当我尝试命名一个链接时遇到问题，如果有多个链接...请查看 demo .

命名链接格式{name}:url应该变成<a href="url">name</a> 。我遇到的问题是喊#5，其中正则表达式没有正确分割两个网址。

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>

脚本

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

<小时/>

更新:感谢 Brad 帮助我处理正则表达式，我终于弄清楚了。如果有人需要它，这里是 updated demo和代码(现在可以在 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;
  });
});

Answer 1

(\{(.+?)\}:)

您需要 ? 来使正则表达式变得“不贪婪”，而不仅仅是找到下一个大括号。

编辑

但是，如果删除 {yahoo}:，第二个链接也会变为 null(似乎填充了 anchor 标记，只是其中没有属性)。这几乎似乎是使用拆分而不是替换的受害者。我几乎建议先检查一下链接，然后再返回寻找图像(我认为直接断开与图像的链接没有任何害处，除非这不是理想的结果？)