时间戳

首页 > 解决方案 > 在 javascript 中有没有更简单的方法将入站 rss 标签映射到输出 rss 标签？

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

问题描述

我已经为这个 Javascript 问题转了四天，终于设法让它工作了。但我确信必须有一个更好的解决方案，一个涉及更少“翻译”的解决方案，这对浏览器的压力会更小。

我觉得我应该能够读取提要的 xml，将入站提要中的标签重新映射到出站提要中的标签。我可以吗？我是否必须坚持我正在工作的解决方案：

简而言之，我通过 http 请求获取具有一些媒体标签的 RSS 提要。它以复制提要的 dom 结构的 xml 形式“到达”。然后我必须从该 dom 重建提要项目（稍微重新映射），以便它们可以返回到调用例程（通过全局变量）。

我研究了各种潜在的替代方案：jQuery.get、json 和其他，但我可以在网上找到的所有示例似乎都忽略了入站提要中的媒体项目——至少我在尝试阅读提要时找不到它们.

这是用作源的 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>

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

(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);

标签： javascriptxmlrss

解决方案

好吧，如果您只在浏览器中进行解析，那么解析实际上非常容易。以下内容不能直接在节点中工作，但您可以使用 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包含. 例如，querySelector 无法解析。querySelectorAll:<media:price>

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

推荐阅读