0

我有一个 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

4

2 回答 2

0

即使用 regx 解析 html 是大渡渡鸟，我仍然会建议你，用 解析你的内容 html/<img\s+src\s*=\s*(["'][^"']+["']|[^>]+)>/

或者一个懒惰的方法是有一个隐藏的 div 并这样做

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

var images = temp.getElementsByTagName( 'img' );
于 2013-06-07T20:01:11.017 回答
0

首先，您必须使用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：我没有从实际答案中窃取这个正则表达式，但似乎我们已经为它提供了相同的参考:-)

更新：然后，为了在容器中显示它，我建议您动态创建 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 参考 - document.createElement

于 2013-06-07T20:16:12.960 回答