使用 JavaScript 解析 XML 文件中的链接

Question

为了在不同的页面上显示我最新的博客文章，我想解析博客中的 rss-feed，然后用它生成元素。

我首先尝试解析一个固定的 .xml 文件，为此我编写了以下代码：

    var maxBlogposts = 5;
    var blogPosts = 0;
     $.get("rss.xml", function(data) {
        $(data).find("item").each(function() {
            if(blogPosts === maxBlogposts) return;
            var el = $(this);

            //Only display 3 posts on small devices.
            var extra = (blogPosts >= 3) ? "not-small 12u(small)" : "12u(small)";
            var div = $('<div class="6u ' + extra + '" class="blog-entry"></div>');
            var h = $('<h4><a href="' + el.find("link").text() + '">' + el.find("title").text() + '</a></h4>');
            var description = el.find("description").text().replace('[&#8230;]', '<a href="' + el.find("link").text() + '">[&#8230;]</a>');
            var p = $('<p>' + description + '</p>');
            div.append(h);
            div.append(p);
            $('#blog').append(div);
            blogPosts++;

        });
    });

这工作得很好。现在我想解析实际的 rss-feed。为此，我编写了一个 PHP 脚本，它只是获取提要并回显它。

<?php

$rss = file_get_contents('http://xn--der-grne-baum-1ob.net/feed/');
die($rss);

?>

我再次在前端获得了正确的 XML 文件。

我的问题是现在我的代码不再工作了。获取描述以及链接都失败了。我通过访问修复了描述

 el.find(description")[0].innerHTML

但是我似乎无法使链接正常工作。从 PHP 文件返回的数据包含一个带有链接的节点。 “el”元素还包含名为“link”的子元素，但这些子元素不再包含实际的链接。

我觉得链接在解析过程中可能会“转义”？至少这是我能想到的唯一原因，这会导致我观察到的结果。

我正在解析的XML来自http://xn--der-grne-baum-1ob.net/feed/

Answer 1

试试

var maxBlogposts = 5
, blogPosts = 0;

$.get("https://query.yahooapis.com/v1/public/yql?q=select"
     + " * from feed where url='http://xn--der-grne-baum-1ob.net/feed/'")
.then(function(data) {
  $(data.documentElement).find("results item")
  .each(function() {
            if(blogPosts === maxBlogposts) return;
            var el = $(this);

            //Only display 3 posts on small devices.
            var extra = (blogPosts >= 3) ? "not-small 12u(small)" : "12u(small)";
            var div = $('<div class="6u ' + extra + '" class="blog-entry"></div>');
            var h = $('<h4><a href="' + el.find("link").text() + '">' + el.find("title").text() + '</a></h4>');
            var description = el.find("description").text().replace('[&#8230;]', '<a href="' + el.find("link").text() + '">[&#8230;]</a>');
            var p = $('<p>' + description + '</p>');
            div.append(h);
            div.append(p);
            $('#blog').append(div);
            blogPosts++;

        });
  }, function(jqxhr, textStatus, errorThrown) {
     console.log(textStatus, errorThrown)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="blog"></div>

见YQL Console