Question

我已经花了整整四天时间解决这个Javascript问题，终于设法使它起作用。但是我相信必须有一个更好的解决方案，一种涉及较少“翻译”的解决方案，以减轻浏览器的负担。

我觉得我应该能够阅读提要的xml，将入站提要中的标签重新映射为出站中的标签。我可以吗？我是否必须坚持使用我已经使用的解决方案：

在坚果壳中，我通过http请求获取具有某些媒体标签的RSS feed。它“到达”作为复制提要的dom结构的xml。然后，我必须从该dom重构提要项（稍作重新映射），以便可以将它们返回到调用例程（通过全局变量）。

我研究了各种可能的替代方法：jQuery.get，json和其他，但是我可以在网上找到的所有示例似乎都忽略了传入提要中的媒体项目-至少当我试图找到它们时，我找不到它们阅读提要。

这是rss feed中的一个条目，被用作源：

<item>
    <guid isPermaLink="false">https://www.zazzle.com/create_your_own_photostamp_by_stamps_com-172639479866885637?rf=238582202591969585&amp;tc=_041218</guid>
    <pubDate>Mon, 19 Nov 2018 23:49:28 GMT</pubDate>
    <title>
        <![CDATA[Create Your Own PhotoStamp by Stamps.com]]>
    </title>
    <link>https://www.zazzle.com/create_your_own_photostamp_by_stamps_com-172639479866885637?rf=238582202591969585&amp;tc=_041218&amp;pm=</link>
    <author>
        <name>zazzle_templates</name>
    </author>
    <description>
        <![CDATA[]]>
    </description>
    <price>$myItem->price</price>
    <media:title>
        <![CDATA[Create Your Own PhotoStamp by Stamps.com]]>
    </media:title>
    <media:description>
        <![CDATA[Upload your own photo or design to create your set of custom photo postage stamps by Stamps.com!]]>
    </media:description>
    <media:price>$22.95</media:price>
    <media:thumbnail url="https://rlv.zcache.com/create_your_own_photostamp_by_stamps_com-r0453bb627c114b9da57442d3dd284e6a_byxt0_8byvr_152.jpg" />
    <media:content url="https://rlv.zcache.com/create_your_own_photostamp_by_stamps_com-r0453bb627c114b9da57442d3dd284e6a_byxt0_8byvr_500.jpg" />
    <media:keywords>
        <![CDATA[create your own, upload your own, template, postage stamp, mailing stamp, wedding, save the date, anniversary, birthday, occasion]]>
    </media:keywords>
    <media:rating scheme="urn:mpaa">g</media:rating>
</item>

这是我正在使用的代码（不，我不是编码员。我主要通过识别示例中的模式并理解一件事与另一件事的等效性来进行编码）

(function ($) {
    'use strict';
    $.fn.rssfeed = function (url, options, fn) {
        return this.each(function (i, e) {
            if (!$(e).hasClass('rssFeed')) { $(e).addClass('rssFeed'); }
            if (url === null) { return false; }
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        process(this);
        if ($.isFunction(fn)) { fn.call(this, $(e)); }    }
            };
            xmlhttp.open("GET", url , true);
            xmlhttp.send();
        });
    };
    var process = function (xml) {
        var i, xmlDoc, table;
        xmlDoc = xml.responseXML;
        var myItemAsAnObject = [];
        feedLength = xmlDoc.getElementsByTagName("item").length;
        console.log("feed length: " + feedLength);
        if (feedLength == 0) { return false; }
        var x = xmlDoc.getElementsByTagName("item");
        for (var i = 0; i < x.length; i++) {
            myItemAsAnObject[i] = {
    pubDate: x[i].getElementsByTagName("pubDate")[0].firstChild.nodeValue,
    link: x[i].getElementsByTagName("link")[0].firstChild.nodeValue,
    keywords: x[i].getElementsByTagName("media:keywords")[0].childNodes[0].data,
    author: {name: x[i].getElementsByTagName("author")[0].childNodes[0].childNodes[0].nodeValue},
    content: {url: x[i].getElementsByTagName("media:content")[0].attributes[0].nodeValue},
    description: [
        x[i].getElementsByTagName("description")[0].childNodes[0].data,
        x[i].getElementsByTagName("media:description")[0].childNodes[0].data
    ],
    guid: {isPermaLink: "false", content: x[i].getElementsByTagName("guid")[0].childNodes[0].nodeValue},
    price: [
        "$myItem->price",
        x[i].getElementsByTagName("media:price")[0].firstChild.nodeValue
    ],
    thumbnail: {url: x[i].getElementsByTagName("media:thumbnail")[0].attributes[0].nodeValue},
    rating: {
        scheme: x[i].getElementsByTagName("media:rating")[0].attributes[0].nodeValue,
        content: x[i].getElementsByTagName("media:rating")[0].childNodes[0].nodeValue
    },
    title: [
        x[i].getElementsByTagName("title")[0].firstChild.nodeValue,
        x[i].getElementsByTagName("media:title")[0].childNodes[0].data
    ]
            };
        }
        feedContent = myItemAsAnObject;
    };
})(jQuery);

Answer 1

好吧，如果仅在浏览器中进行解析，实际上非常简单。以下内容不能直接在node中工作，但是您可以使用js-dom（但老实说，在这种情况下，您应该使用更好的xml解析器。）

https://codepen.io/anon/pen/yQdjyo?editors=0010

const rss = `
<item>
    <guid isPermaLink="false">https://www.zazzle.com/create_your_own_photostamp_by_stamps_com-172639479866885637?rf=238582202591969585&amp;tc=_041218</guid>
    <pubDate>Mon, 19 Nov 2018 23:49:28 GMT</pubDate>
    <title>
        <![CDATA[Create Your Own PhotoStamp by Stamps.com]]>
    </title>
    <link>https://www.zazzle.com/create_your_own_photostamp_by_stamps_com-172639479866885637?rf=238582202591969585&amp;tc=_041218&amp;pm=</link>
    <author>
        <name>zazzle_templates</name>
    </author>
    <description>
        <![CDATA[]]>
    </description>
    <price>$myItem->price</price>
    <media:title>
        <![CDATA[Create Your Own PhotoStamp by Stamps.com]]>
    </media:title>
    <media:description>
        <![CDATA[Upload your own photo or design to create your set of custom photo postage stamps by Stamps.com!]]>
    </media:description>
    <media:price>$22.95</media:price>
    <media:thumbnail url="https://rlv.zcache.com/create_your_own_photostamp_by_stamps_com-r0453bb627c114b9da57442d3dd284e6a_byxt0_8byvr_152.jpg" />
    <media:content url="https://rlv.zcache.com/create_your_own_photostamp_by_stamps_com-r0453bb627c114b9da57442d3dd284e6a_byxt0_8byvr_500.jpg" />
    <media:keywords>
        <![CDATA[create your own, upload your own, template, postage stamp, mailing stamp, wedding, save the date, anniversary, birthday, occasion]]>
    </media:keywords>
    <media:rating scheme="urn:mpaa">g</media:rating>
</item>
`;

const doc = document.createDocumentFragment();
const root = document.createElement('div');
root.innerHTML = rss;

doc.appendChild(root);

// const getValue = (selector) => root.querySelectorAll(selector).innerHTML;

// const obj = {
//   pubDate: getValue('pubDate'),
//   link: getValue('link'),
//   keywords: getValue('media:keywords'),
//   author: {name: ''},
//   content: {url: ''},
//   description: [

//   ],
//   guid: '',
//   thumbnail: '',
//   rating: {
//     scheme: '',
//     content: ''
//   },
//   title: [

//   ]
// };

// console.log(obj);

这会将xml字符串转换为文档片段，然后您可以对其进行查询。只要xml节点不包含querySelector，querySelectorAll和:就能正常工作。例如，<media:price>无法由querySelector解析。

这至少应该使您的代码部分更简单。

在javascript中，有没有更简单的方法将入站rss标签映射到输出rss标签？

1 个答案: