JavaScript将图像文字链接替换为图像，但忽略现有的IMG标签

我想用真实图像替换页面上的代码，而不是图像链接。我可以做到这一点已基于另一个stackoverflow答案。JavaScript将图像文字链接替换为图像，但忽略现有的IMG标签

但我想知道是否有办法忽略IMG标签中包含的任何内容。谢谢！

$("#photos li").each(function() { 
     $(this).html($(this).html().replace(/(http:\/\/\S+(\.png|\.jpg|\.gif))/g, '<a href="$1" class="fancybox" rel="gallery1"><img src="$1" /></a>')); 
    });

来源

2012-05-18 Scott Yu - Front-End UX

它看起来像列表包含一组网址，而不是链接。

$("#photos li").each(function() { 
    if(!$(this).find('img').length){ 
     $(this).html($(this).html().replace(/(http:\/\/\S+(\.png|\.jpg|\.gif))/g, '<a href="$1" class="fancybox" rel="gallery1"><img src="$1" /></a>')); 
    } 
});

这当然取决于你的HTML有什么结构。

JSFiddle。

来源

2012-05-18 19:00:36

感谢您对JSFIDDLE的演示。作品！ –

这可能不太可能，但可能会破坏：http://jsfiddle.net/9aK7L/ – yankee

是的，我的解决方案依赖于HTML的完整性，但我怀疑标签将在URL内。 –

你不应该只适用于正则表达式的HTML。这很难理解，也很难预测它有哪些副作用。相反，您应该使用具有完全解析的DOM树的优势，并将您关心的那些元素传递给它们：文本节点！

此外，我会建议你不要写如"<img src="$1" />"的东西。如果$ 1包含奇怪的东西，那么奇怪的事情就会发生。没有必要考虑这可能导致的所有事情，因为一个非常简单的解决方法是：jQuery('<img />').attr('src', someTextWithNotTooWellCheckedContent)。

这里是它如何工作的一个例子：

jQuery('#photos li').find('*').contents().filter(function() { 
    return this.nodeType == 3; 
}).each(function(i, elem) 
     { 
      var matches = /(.*)(http:\/\/\S+(?:\.png|\.jpg|\.gif))(.*)/g.exec(elem.wholeText); 
      if (matches) 
      { 
       var parent = elem.parentNode; 
       var before = matches[1]; 
       var replace = jQuery('<a />').attr('href', matches[2]).append(jQuery('<img />').attr('href', matches[2]))[0]; 
       var after = matches[3]; 
       parent.insertBefore(document.createTextNode(before), elem); 
       parent.insertBefore(replace, elem); 
       parent.insertBefore(document.createTextNode(after), elem); 
       parent.removeChild(elem); 
      } 
     });

在行动：http://jsfiddle.net/B4GPt/

PS：您可能会或可能不会需要以上通过更换find('*')与find('*').andSelf()取决于你的HTML扩展代码结构和意图。

来源

2012-05-18 19:01:17 yankee

真棒解决方案！谢谢！它看起来好像还有很多工作要做，但从另一个答案的表现来看，哪个更快？ –

@Scott：很难说清楚，因为它很大程度上取决于浏览器优化引擎的实现。但我想在大多数浏览器中，Little Big Bot的解决方案会更快。我的解决方案适用于更多可能被视为“角落案例”但我不想拥有的案例。考虑http://jsfiddle.net/LaEpj/1/，Little Big Bot的解决方案可能不是你想要的。取决于你的html结构，尽管... – yankee

JavaScript将图像文字链接替换为图像，但忽略现有的IMG标签

回答

相关问题