Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Получить картинку из HTML (https://javascript.ru/forum/misc/68979-poluchit-kartinku-iz-html.html)

Зосимов 22.05.2017 08:23
Получить картинку из HTML
 
Всем привет.
есть HTML пример: 
<div class="new">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
<img src="test.jpeg" width="45"/>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
<img src="image2.jpeg" width="300" height="300" />
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<img src="image3.jpeg" width="50" height="50" />
</div>

как можно с этой страницы получить только первую картинку?
(ну и вообще как вытащить только изображение <img >)
учитывая что картинка не имеет например id и класса.

ruslan_mart 22.05.2017 08:25 
var image = document.querySelector('.new img');

Зосимов 22.05.2017 12:23
Цитата:
Сообщение от Ruslan_xDD (Сообщение 453003) 
var image = document.querySelector('.new img');
спасибо.
а если это приходит через json и нужно вытащить оттуда
success: function(data) { 
        
    $.each(data, function(key, val) { 
        
    var intro = val.introtext;


в intro есть текст с картинками

ruslan_mart 22.05.2017 13:17 
var tempDiv = document.createElement('div');
tempDiv.innerHTML = intro;

var image = tempDiv.querySelector('img');

Зосимов 22.05.2017 13:35
Цитата:
Сообщение от Ruslan_xDD (Сообщение 453047) 
var tempDiv = document.createElement('div');
tempDiv.innerHTML = intro;

var image = intro.querySelector('img');
ошибка:
intro.querySelector is not a function

может как то search можно использовать?
например вот так 
var image = val.introtext.search("img");

находит элементы. но вывести пока не получается.

ruslan_mart 22.05.2017 13:36
Зосимов, опечатался, исправил, смотрите пост ещё раз.

ruslan_mart 22.05.2017 13:40
Если текстом получить нужно, то можно так:

var image = intro.match(/<img.*?\/?>/i);
image = image && image[0];

alert( image );

ruslan_mart 22.05.2017 13:44
Наиболее правильный вариант:

var image = (new DOMParser).parseFromString(intro, 'text/html').querySelector('img');


:)

Зосимов 22.05.2017 14:19
Цитата:
Сообщение от Ruslan_xDD (Сообщение 453057)
Если текстом получить нужно, то можно так:

var image = intro.match(/<img.*?\/?>/i);
image = image && image[0];

alert( image );
спасибо. именно текстом получить нужно было. что бы вывести полученную картинку на страницу.

а можно ей класс присвоить уже после выбора?

ruslan_mart 22.05.2017 14:22 
var image = (new DOMParser).parseFromString(intro, 'text/html').querySelector('img');

image.classList.add('myClass');

myWrapper.appendChild(image);



Текстом:

var image = (new DOMParser).parseFromString(intro, 'text/html').querySelector('img');

image.classList.add('myClass');

alert( image.outerHTML );

Зосимов 22.05.2017 14:46
Цитата:
Сообщение от Ruslan_xDD (Сообщение 453066)
Текстом:

var image = (new DOMParser).parseFromString(intro, 'text/html').querySelector('img');

image.classList.add('myClass');

alert( image.outerHTML );
ой сори. где нет картинки выдает ошибку оказывается )
Cannot read property 'classList' of null

ruslan_mart 22.05.2017 14:54 
var image = (new DOMParser).parseFromString(intro, 'text/html').querySelector('img');

if(image) {
   image.classList.add('myClass');

   alert( image.outerHTML );
}


Часовой пояс GMT +3, время: 00:32.