JQuery: найти все ссылки на изображения и превратить их в некоторые большие пальцы по умолчанию? - PullRequest
1 голос
/ 24 февраля 2010

У меня есть 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 .... или другого решения?

Ответы [ 2 ]

4 голосов
/ 24 февраля 2010

Трудно точно сказать, что делать, поскольку я не знаю, что вы ищете.

Если ссылки в настоящее время являются частью тега, это будет просто.

Но похоже, что hrefs изображения в настоящее время не являются частью какого-либо тега. Это верно?

Если это так, и вы думаете, что вам нужен 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>')); 
});

Это может иметь последствия для безопасности, если вредоносный код может быть скрыт в строке ссылки. Не уверен, хотя. Если это проблема, должен быть другой способ.

РЕДАКТИРОВАТЬ: Исключает ссылки из домена сайта (при условии, что они являются частью того же текста, который ищется) .

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>')); 
});
1 голос
/ 25 февраля 2010

RegEx? Нам не нужно вонючее RegEx!

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

Селекторы CSS могут сделать это за вас. Выше все элементы a выбираются с href, заканчивающимся указанными форматами.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...