jQuery:找到所有图像链接并将它们转换为一些默认拇指？

Question

我有所见即所得，我不允许用户上传图像，只允许链接到网站外部的图像。

所以我想找到每个图像链接/路径，并将其替换为一些默认的拇指，用户可以单击该拇指，该图像将显示在模式窗口中。我正在使用 qTip，但这将是我工作的一部分:)

如果有:

http://sstatic.net/so/img/logo.png

或

http://l.yimg.com/a/i/ww/news/2010/02/22/fries_on_plate-pd.jpg

它们将被“转换”为类似:

<a href="http://OriginalPathToImage" rel="tool_tip"><img src="/SomeDefaultImageThumb.jpg" /></a>

那么，如何查找所有图像呢？用于查找 .jpg、.gif、.png... 或其他解决方案的 RegExp 是什么？

Answer 1

很难确切地说出要做什么，因为我不知道您在搜索什么。

如果链接当前是标签的一部分，那就很简单。

但听起来图像 href 目前不属于任何标签。是这样吗？

如果是这样，并且您认为需要 reg exp，您可以尝试，

var result = text.match(/http:\/\/\S+(\.png|\.jpg|\.gif)/g);

(这是一个简单的问题，我确信可以稍微收紧一点。事实上，例如，它不允许在 href 中使用“空格”字符。)

它将搜索“http://”加上除空格字符外的任何内容加上“.png”或“.jpg”或“.gif”，并返回结果数组。

因此，如果搜索文本是:

var text = 'http://sstatic.net/so/img/logo.png some text http://l.yimg.com/a/i/ww/news/2010/02/22/fries_on_plate-pd.jpg more text http://l.yimg.com/this/is/another/path/to_this_image.jpg';

它将返回一个包含 3 个结果的数组。

使用 jQuery(因为你标记了它)你可以:

var $aTag;

for(i in result) {
    $aTag = $('<a><img src="/SomeDefaultImageThumb.jpg" /></a>').attr({'href': result[i]});
    $('body').append($aTag);
}

这会将新标签(在本例中)附加到正文。

编辑:使用您的示例，我在搜索查询周围添加了括号，并在替换字符串中使用 href="$1"引用它 -

在搜索字符串中添加了一组额外的括号。这将创建 $1 引用的“内存”组。

$("div.test").each(function() { 
    $(this).html($(this).html().replace(/(http:\/\/\S+(\.png|\.jpg|\.gif))/g, '<a href="$1"><img src="/SomeDefaultImageThumb.jpg" /></a>')); 
});

如果恶意代码可以隐藏在链接字符串中，则可能会产生安全隐患。但不确定。如果这是一个问题，应该有另一种方法来解决它。

编辑:从网站域中排除 href(假设它们是正在搜索的同一文本的一部分)。

var hostname = window.location.hostname.replace(/\./g,'\\.');
var re = new RegExp('(http:\\/\\/[^' + hostname + ']\\S+[\\.png|\\.jpg|\\.gif])','g');

$("div.test").each(function() {
    $(this).html($(this).html().replace(re, '<a href="$1"><img src="/SomeDefaultImageThumb.jpg" /></a>')); 
});