Question

我想用真实图像替换页面上的代码而不是图像链接。我已经可以基于另一个stackoverflow答案做到这一点。

但我想知道是否有办法忽略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>')); 
    });

Answer 1

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

$("#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

Answer 2

您不应该只是将正则表达式应用于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/

P.S。：根据您的html结构和意图，您可能需要也可能不需要将find('*')替换为find('*').andSelf()来扩展上述代码。

Javascript将图像文本链接替换为图像，但忽略现有的IMG标记

2 个答案: