Question

我需要一些正则表达式的帮助。基本上我有一个只显示文字的喊话框。我想用图片替换带有链接和图片网址的网址。我已经掌握了基础知识，只是当我尝试命名一个我遇到问题的链接时，如果有多个链接...请查看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);
  });
 });

更新：我想通了布拉德帮助我使用正则表达式。如果有人需要它，这里是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}:，第二个链接也会变为空（似乎填充了锚标记，只是没有属性）。这几乎似乎是使用拆分而不是替换的受害者。我几乎建议先做一次性寻找链接，然后回去寻找图片（我没有看到直接链接到图像的任何伤害，除非这不是一个理想的结果？）

正则表达式用链接替换url

1 个答案: