0

我想用真实图像而不是图像链接替换页面上的代码。我已经可以根据另一个 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>')); 
    });
4

2 回答 2

1

看起来列表包含一组 URL，而不是链接。

$("#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 的结构。

JSF中。

于 2012-05-18T19:00:36.163 回答
1

您不应该只将正则表达式应用于 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-18T19:01:17.883 回答