javascript - 使用 jQuery 解析包含 CDATA 的 RSS 提要

Question

我正在尝试将 RSS 提要解析为一个数组，但提要添加了 CDATA 标签并组合了某些元素。

我下面的代码通过 rss 提要 (url) 进行解析并将某些元素添加到数组中。但是，当我查看提要本身时，它在 CDATA 标记中组合了多个关键元素。

我如何解析 CDATA 标记以获得可用的 xml 字段？

代码

buildXMLDoc = function (url) {
    var list =[];

    $(listXML).find('item').each(function (){
        var el = $(this);
        console.log(el.find("title").text());
        console.log(el.find("pubDate").text());
        console.log(el.find("description").text());
        list.push({title: el.find("title").text(), description: el.find("description").text(), modified: el.find("pubDate").text()});
    });

    return list;

};

XML

<?xml version="1.0" encoding="UTF-8"?>
<!--RSS generated by Microsoft SharePoint Foundation RSS Generator on 8/29/2017 10:23:18 AM -->
<?xml-stylesheet type="text/xsl" href="/_layouts/RssXslt.aspx?List=43aaf08e-0153-4f1d-9b46-e66bba563fde" version="1.0"?>
<rss version="2.0">
  <channel>
    <title>Webdocs: Test</title>
    <description>RSS feed for the Test list.</description>
    <lastBuildDate>Tue, 29 Aug 2017 14:23:18 GMT</lastBuildDate>
    <generator>Microsoft SharePoint Foundation RSS Generator</generator>
    <ttl>60</ttl>
    <language>en-US</language>
    <item>
      <title>Alternative Methods for Determining LCRs</title>
      <description><![CDATA[<div><b>Short Title:</b> Determining LCRs</div>
<div><b>Description:</b> <div class="ExternalClass6280076BC79848078688B86006BA554F"><p>​<span style="font-size:11.5pt;font-family:&quot;calibri&quot;, &quot;sans-serif&quot;">This project is a carryover from the 2017 effort to identify an alternative method for calculating the Locational Minimum Installed Capacity Requirements (LCRs). </span></p></div></div>
<div><b>Governance Process Status:</b> Progress</div>
<div><b>Topic State:</b> Open/Current</div>
<div><b>Updated Placeholder:</b> updated</div>
]]></description>
      <pubDate>Wed, 12 Jul 2017 13:41:06 GMT</pubDate>
    </item>

突出显示的项目应该是单独的元素。

Answer 1

为了获取 CDATA 部分的详细信息，我建议使用 jquery.contents() 并按位置获取相关的子部分。如果位置发生变化，这可能会给您带来错误的结果，但这是有可能的。

var listXML = '<?xml version="1.0" encoding="UTF-8"?>\
    <!--RSS generated by Microsoft SharePoint Foundation RSS Generator on 8/29/2017 10:23:18 AM -->\
<?xml-stylesheet type="text/xsl" href="/_layouts/RssXslt.aspx?List=43aaf08e-0153-4f1d-9b46-e66bba563fde" version="1.0"?>\
<rss version="2.0">\
        <channel>\
        <title>Webdocs: Test</title>\
<description>RSS feed for the Test list.</description>\
<lastBuildDate>Tue, 29 Aug 2017 14:23:18 GMT</lastBuildDate>\
<generator>Microsoft SharePoint Foundation RSS Generator</generator>\
<ttl>60</ttl>\
<language>en-US</language>\
<item>\
<title>Alternative Methods for Determining LCRs</title>\
<description><![CDATA[<div><b>Short Title:</b> Determining LCRs</div>\
<div><b>Description:</b> <div class="ExternalClass6280076BC79848078688B86006BA554F"><p>​<span style="font-size:11.5pt;font-family:&quot;calibri&quot;, &quot;sans-serif&quot;">This project is a carryover from the 2017 effort to identify an alternative method for calculating the Locational Minimum Installed Capacity Requirements (LCRs). </span></p></div></div>\
<div><b>Governance Process Status:</b> Progress</div>\
<div><b>Topic State:</b> Open/Current</div>\
<div><b>Updated Placeholder:</b> updated</div>\
    ]]></description>\
<pubDate>Wed, 12 Jul 2017 13:41:06 GMT</pubDate>\
</item>';

var list =[];

$(listXML).find('item').each(function (){
    var el = $(this);
    var cdat = $(listXML).find('item description').contents();
    console.log(cdat.eq(1).text() + cdat.eq(2).text());
    console.log(cdat.eq(5).contents().eq(0).text()  + cdat.eq(5).contents().eq(1).text());
    console.log(cdat.eq(6).contents().eq(0).text()  + cdat.eq(6).contents().eq(1).text());
    list.push({title: cdat.eq(2).text(), description: cdat.eq(5).contents().eq(1).text(), modified: cdat.eq(6).contents().eq(1).text()});
});

console.log('list: ' + JSON.stringify(list));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

另一种方法是获取描述元素，替换内部 CDATA 并将结果转换为 jQuery 对象。在此对象上，您可以使用 find 来选择子元素。

var listXML = '<?xml version="1.0" encoding="UTF-8"?>\
    <!--RSS generated by Microsoft SharePoint Foundation RSS Generator on 8/29/2017 10:23:18 AM -->\
<?xml-stylesheet type="text/xsl" href="/_layouts/RssXslt.aspx?List=43aaf08e-0153-4f1d-9b46-e66bba563fde" version="1.0"?>\
<rss version="2.0">\
        <channel>\
        <title>Webdocs: Test</title>\
<description>RSS feed for the Test list.</description>\
<lastBuildDate>Tue, 29 Aug 2017 14:23:18 GMT</lastBuildDate>\
<generator>Microsoft SharePoint Foundation RSS Generator</generator>\
<ttl>60</ttl>\
<language>en-US</language>\
<item>\
<title>Alternative Methods for Determining LCRs</title>\
<description><![CDATA[<div><b>Short Title:</b> Determining LCRs</div>\
<div><b>Description:</b> <div class="ExternalClass6280076BC79848078688B86006BA554F"><p>​<span style="font-size:11.5pt;font-family:&quot;calibri&quot;, &quot;sans-serif&quot;">This project is a carryover from the 2017 effort to identify an alternative method for calculating the Locational Minimum Installed Capacity Requirements (LCRs). </span></p></div></div>\
<div><b>Governance Process Status:</b> Progress</div>\
<div><b>Topic State:</b> Open/Current</div>\
<div><b>Updated Placeholder:</b> updated</div>\
    ]]></description>\
<pubDate>Wed, 12 Jul 2017 13:41:06 GMT</pubDate>\
</item>';

var list =[];

$(listXML).find('item').each(function (){
    var el = $(this);
    var cdat = $(listXML).find('item description').contents();
    var html = $($(listXML).find('item description')[0].innerHTML.replace('<!--[CDATA[', '')).html();
    console.log(html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>