Question

我有WYSIWYG，我不允许用户上传图片，只是链接到网站外的图片。

所以我想找到每个图像链接/路径并用一些默认拇指替换它，用户可以点击该图像，该图像将显示在模态窗口中。我正在使用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>

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

Answer 1

要确切地说要做什么有点难，因为我不知道你在搜索什么。

如果链接当前是标记的一部分，那么它将很简单。

但听起来像图片hrefs目前不是任何标签的一部分。是吗？

如果是这样，你认为你需要一个reg exp，你可以尝试，

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

（这是一个简单的问题，我可以肯定会收紧一点。例如，它不会允许href中的'space'字符。）

它将搜索“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>')); 
});

Answer 2

正则表达式？我们不需要stinkin'RegEx！

$('a[href$="jpg"], a[href$="jpeg"], a[href$="png"], a[href$="gif"]')

CSS选择器可以为您做到这一点。以上选择a个href元素，其中{{1}}以指定格式结尾。

jQuery：找到所有图片链接并将它们转换为默认的拇指？

2 个答案: