Показать изображение в JavaScript

Question

Я получил Litlle JS код, который показывает мне обновления от корма

google.load("feeds", "1"); 

function initialize() { 
    var feed = new google.feeds.Feed("http://google.com/"); 
    feed.setNumEntries(1); 
    var count = 1; 
    feed.load(function(result) { 
    if (!result.error) { 
     var container = document.getElementById("feed"); 
     var html = ""; 
     for (var i = 0; i < result.feed.entries.length; i++) { 
     var entry = result.feed.entries[i]; 
     html = "<h5>" + count++ + ". <a href='" + entry.link + "'>" + entry.title + "</a></h5>"; 
     var div = document.createElement("div"); 
     div.innerHTML = html; 
     container.appendChild(div);    
     } 
     document.write(html); 
    } 
    }); 
} 
google.setOnLoadCallback(initialize); 

Что я хочу сделать это, чтобы показать первое изображение из постов из корма. я также хотел бы иметь название так entry.title и entry.content

Answer 1

Даже если разбор HTML с regx большой додо, я все равно советую вам это, разобрать ваш контент HTML с /<img\s+src\s*=\s*(["'][^"']+["']|[^>]+)>/

Или ленивым способ иметь скрытый DIV и сделать это

var temp = document.createElement('div'); 
temp.innerHTML = html_str; 

var images = temp.getElementsByTagName('img'); 

Answer 2

во-первых, вы должны использовать entry.content вместо entry.title для того, чтобы получить полное содержание HTML вступления. Вы можете иметь что-то вроде этого:

var content = entry.content; 
var imgArray = content.match(/<img\s+src\s*=\s*(["'][^"']+["']|[^>]+)>/); 
// imgArray[0] would contain the first image (more likely the one that better describe the post) 

PS: Я не воровал этот Regex от фактического ответа, но мне кажется, что у нас к тому же reference для него :-)

---

UPDATE: Затем, чтобы отобразить его в контейнере, я бы посоветовал вам динамически создавать элементы DOM, чтобы получить больше контроля над ним и в котором вы сможете легко связать значение. Что-то вроде этого:

var dom_h5 = document.createElement('h5'); 

var dom_entryTitle = document.createElement('div'); 
dom_entryTitle.className = 'title-classname'; 
dom_entryTitle.innerHTML = entry.title; 
dom_h5.appendChild(dom_entryTitle); 

container.appendChild(dom_h5); 

Чтобы упростить часть изображения, вы можете создать отдельный DIV и ввести тег изображения, как его innerHTML.

Это может помочь вам:

Web API Reference - document.createElement