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

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

看起来列表包含一组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的结构。

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/

PS：根据你的html结构和意图，你可能需要或不需要将find('*')替换为find('*').andSelf()从而扩展上面的代码。