Javascript 正则表达式将url替换为链接

我需要你帮我弄点regex。基本上我有一个只显示文本的留言框。我想用链接替换URL，用图像替换图像URL。我有基本的工作，它只是当我试图命名一个链接，我有问题，如果有一个以上的链接。。。看看这本书

命名链接格式

{name}:url

应变为

。我遇到的问题是，在shout#5中，正则表达式没有正确分割两个URL

HTML

Shout#1和谷歌链接：http://www.google.com
用图像呼喊#2：http://i201.photobucket.com/albums/aa236/Mottie1/SMRT.jpg
通过两个链接呼喊#3：http://www.google.com 及http://www.yahoo.com
使用命名链接{google}呼喊#4：http://www.google.com
用两个命名链接呼喊#5:{google}：http://www.google.com 和{yahoo}：http://www.yahoo.com 和{google}：http://www.google.com

剧本

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

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'）。每个（功能（i）{
var=$（本）；
html（函数（i，h）{
var p=h.分割（rex1），
img=h.匹配（rex2），
类型=（p[2]！=“”）？“”；
如果（img！==null）{
shout.addClass（'shoutWithImage'）
类型=''；
}
返回h.更换（rex1，典型）；
});
});

---

更新：多亏了Brad帮我学习regex，我才明白这一点。如果有人需要它，这里是和代码（现在在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'）。每个（功能（i）{
var=$（本）；
html（函数（i，h）{
var txt，url=h.split（“”），
img=h.match（rex2）；
如果（img！==null）{
shout.addClass（'shoutWithImage'）；
$。每个（img，功能（i，图像）{
h=h。替换（图“”）；
});
}否则{
$。每个（url、函数（i、u）{
if（rex1.试验（u））{
txt=u.split（'：'）[0]| |'；
if（txt.indexOf（'{'）>=0）{
u=u.replace（txt+'：'，''；
txt=txt.replace（/[\{\}]/g'，）；
}否则{
txt=''；
}
url[i]=''；
}
});
h=url.join（“”）；
}
返回h；
});
});

您需要

？

使正则表达式变为“ungreedy”，而不仅仅是找到下一个大括号

编辑

---

但是，如果您删除

{yahoo}:

第二个链接也会变为null（似乎填充了锚标记，只是其中没有属性）。这似乎是使用拆分而不是替换的受害者。我几乎建议您先进行一次链接查找，然后再回头查找图像（我看不出直接链接到图像有什么害处，除非这不是一个期望的结果？）

您的问题之一是URL没有任何分隔符。这会使您的regexp非常复杂，因为它现在必须了解URL的格式。即使您将自己限制为http:，这仍然很困难。@Arkadiy:我无法控制人们在留言框中键入的内容=（+1谢谢…你让我走上了正确的轨道，但是的，我看到了问题。我明白了，谢谢！…我刚刚添加了几个循环来断开链接。我更新了上面的演示：）@Brad Christie:嗯，有没有线索为什么IE在第一个正则表达式上完全搞砸了？当我在

$中添加一个警报时。每个（url…

，

u

的值从不包含url，只包含其周围的文本。根据它似乎不只是IE，FF（至少Beta 4）也不那么热。让我喝几口咖啡，我会试试看。；-）经过进一步研究，它可能与此有关：（尽管我仍在寻找它）.我甚至试着制作自己的正则表达式，但它的表现不同，所以我想这是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 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);
  });
 });

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

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