Как я могу проверить источник всех тегов изображения в пользовательском вводе, используя jQuery

Question

У меня есть форма для ввода данных пользователем, в которой пользователи могут добавлять изображения, размещенные в других местах, используя форму.Изображения отображаются в виде небольшого значка, который является одновременно ссылкой и загружает изображение в div с порядком размещения +1 при наведении курсора.Адрес источника изображения сохраняется только в теге ссылки.

Я использую <div /> с contenteditable=true для ввода пользователя.Значок добавляется при использовании формы.Код для этой части работает нормально.Я хотел бы проверить источник всех тегов изображений, чтобы убедиться, что пользователи не добавляют свои собственные html-файлы для отображения полноразмерных изображений в своих публикациях.

Я использую php на сервере для удаления всехтеги, за исключением ссылок и изображений, но хотел бы использовать jQuery, чтобы проверить src тегов изображения перед публикацией.

<a href="image_source.jpg"><img src="my_icon" /></a> //this is what my form will input

<img src="anything_else"> //this is what I want to prevent 

Обновление: прошу прощения, если это не ясно.По сути, я не хочу, чтобы пользователь мог вводить любой собственный HTML.Если они хотят добавить изображение, они должны использовать мою встроенную форму, которая вставляет что-то вроде выше.

Answer 1

У меня есть ответ.Когда пользователи вводят < или > в div contenteditable = "true", браузер заменяет их HTML-нотацией < и >.Хорошей новостью является то, что изображения никогда не отображались бы при выводе комментария пользователя.Плохая новость заключается в том, что приведенные выше решения на основе jQuery не помогут устранить уродливое кодирование.Я закончил тем, что использовал php, чтобы сделать это с

$post = $_POST['comment'];
$imgcheck = true;
$stringstart = 0;

while($imgcheck == 'true'){
    if($stringstart = strpos($post,'<img',$stringstart)){
        if ($stringend = strpos($post,'>',$stringstart)){
            $strlength = $stringend - $stringstart +4;
            $substring = substr($post,$stringstart,$strlength);
            if (!preg_match('~src="\/images\/ImageLink.jpg"~',$substring)){
                $post = str_replace($substring, "", $post);
            }
            else{
                $stringstart = $stringend;
            }

        }
        else{
            $imgcheck = 'false';
        }
    }
    else{
            $imgcheck = 'false';
    }

}

Answer 2

Вы можете зациклить изображения, а затем проверить атрибут src.

$("img").each(function(index) {
    if ($(this).attr("src") == ...) {
        // do something
    }
}

См. http://api.jquery.com/each/ и http://api.jquery.com/attr/ для получения дополнительной информации.

Answer 3

Скажем, у нас есть <div id="editor" /> сценарий jQuery, который будет выглядеть примерно так:

var srcs = [];
jQuery ('div#editor img').each (function () {
  srcs.push (jQuery (this).attr ('src'));
});

srcs теперь будет содержать все атрибуты src из тегов <img />, предоставленных втег <div id="editor" />.

Answer 4

Специально для вашего сайта следующий код предупреждает ссылки на все изображения:

$('.postimage').each(function(){
   alert($(this).attr('href'));
});