Найти значение атрибута src тега <img> в строке Javascript

0

Я пытаюсь получить "src" в тегах img внутри переменной javascript, которая содержит блок HTML-кода, динамически сгенерированный/назначенный.

Например:

var post_body = "<div>This is an image <img src='abcd.jpg' /> and this is a paragraph <p>hi there</p> Here we have another image <img src='pqrs.jpg' /></div>"

содержимое переменной "post" не предопределено и динамично, и код HTML в нем всегда изменяется. Чтобы получить src изображения в нем, я сделал следующее. Но это не всегда работает для меня.

var firstimg = $(post_body).find("img:first").attr("src");

Я пытался получить первый образ сообщения в блоге из содержания блога, но это не работает для некоторых сообщений с изображениями. Как это можно сделать с помощью javascript или jQuery без сбоев?

  • 2
    Вы ссылаетесь на post_body а ваша переменная называется post .
  • 0
    Извините, я соответственно изменил текст вопроса. 'post' должен быть изменен как 'post_body'. Вот почему я использовал post_body после этого по ошибке при подготовке этого вопроса.
Показать ещё 2 комментария

3 ответа

5
Лучший ответ

Используя обычный JavaScript, выгрузите HTML во временный элемент и извлеките его:

var div = document.createElement('div');
div.innerHTML = post_body;
var firstImage = div.getElementsByTagName('img')[0]
var imgSrc = firstImage ? firstImage.src : "";
// or, if you want the unresolved src, as it appears in the original HTML:
var rawImgSrc = firstImage ? firstImage.getAttribute("src") : "";
  • 0
    Мы не можем сказать, что строка начинается с тега div или ap. Это абсолютно непредсказуемо и не может использовать этот ответ.
  • 0
    Хм ... почему имеет значение, с чего начинается строка? Этот код работает с любым HTML ...
Показать ещё 2 комментария
2

Измените $(post_body) на $(post)

Пытаться

var post = "<div>This is an image <img src='abcd.jpg' /> and this is a paragraph <p>hi there</p> Here we have another image <img src='pqrs.jpg' /></div>";
var firstimg = $(post).find('img:first').attr('src');
  • 0
    Извините, я соответственно изменил текст вопроса. 'post' должен быть изменен как 'post_body'. Вот почему я использовал post_body после этого по ошибке при подготовке этого вопроса.
  • 0
    @techytee Приведенный выше код работает для меня нормально
Показать ещё 1 комментарий
0

Возможно, вы можете попробовать добавить id в тег img а затем получить к нему доступ.

var oImg = document.getElementById('myImg');
var attr = oImg.getAttribute('src');

Это чистое решение js.

  • 0
    Теги изображений не могут быть предопределены, они автоматически загружаются из онлайн-источника.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню