如何使用jQuery动态生成XML格式RSS文件并消除多余HTML标签

我正在尝试抓取包含文章列表的外部网页，将其重新生成RSS格式。为了方便提取目标网页的HTML内容中的所需元素，我选择使用jQuery实现，目前已编写的代码如下：

$.ajax({
    url:"fetch.php",
    success:function(data){
        analyzeHtml(data);
    }
})

function analyzeHtml(data){
    document.clear();
    document.write('<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title>Example</title><description>Example Description</description><link>https://www.example.com/en/</link><generator>PHP RSS</generator>')
    $(data).find("article").each(function(){
        $(this).find(".article-body-container").each(function(){
            var href=$(this).find("h3").find("a").attr("href");
            var title=$(this).find("h3").find("a").text();
            document.write("<item>");
            document.write("<guid>"+href+"</guid>");
            document.write("<link>"+href+"</link>");
            document.write("<title>"+title+"</title>");
            document.write("</item>");
        })
    });
    document.write("</channel></rss>");
    var myhtml=$("body").html();
    $("body").remove();
    $("html").append(myhtml);
}

实际输出的检查结果如下：

<!--?xml version="1.0" encoding="utf-8" ?-->
  <html>
   <head></head>
    <rss version="2.0">...</rss>
  </html>

我需要将结果作为XML文档提供，使RSS阅读器可以正常读取该页面内容。请问如何通过jQuery清除多余的Head和Html标签，将生成的RSS内容输出为纯净的XML文档？另外RSS阅读器是否可以正常识别此类动态生成的XML文档？

问题根源 #

你现在操作的是HTML类型的文档，浏览器会自动补全<html>、<head>、<body>等默认HTML标签，还会把不符合HTML规范的XML声明自动注释，才会出现你遇到的多余标签问题。

修复方案 #

方法1：Blob输出纯净XML（推荐） #

不要操作当前页面的DOM，直接把拼接好的RSS内容转为XML类型的Blob对象，让浏览器直接渲染纯XML内容，完全不会生成多余标签：

$.ajax({
    url:"fetch.php",
    success:function(data){
        analyzeHtml(data);
    }
})

function analyzeHtml(data){
    // 先拼接完整RSS内容，不直接写入页面
    let rssContent = '<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title>Example</title><description>Example Description</description><link>https://www.example.com/en/</link><generator>PHP RSS</generator>';
    $(data).find("article").each(function(){
        $(this).find(".article-body-container").each(function(){
            var href=$(this).find("h3").find("a").attr("href");
            var title=$(this).find("h3").find("a").text();
            rssContent += "<item>";
            rssContent += "<guid>"+href+"</guid>";
            rssContent += "<link>"+href+"</link>";
            rssContent += "<title>"+title+"</title>";
            rssContent += "</item>";
        })
    });
    rssContent += "</channel></rss>";
    
    // 生成application/xml类型的Blob
    const rssBlob = new Blob([rssContent], {type: 'application/xml'});
    const blobUrl = URL.createObjectURL(rssBlob);
    // 跳转到Blob地址，浏览器会直接输出纯净XML
    window.location.href = blobUrl;
}

方法2：当前页直接替换文档类型 #

如果不需要跳转，也可以直接修改当前文档的内容类型，替换整个根节点：

// 拼接完rssContent后执行以下代码
document.contentType = 'application/xml';
const xmlDoc = new DOMParser().parseFromString(rssContent, 'application/xml');
document.replaceChild(
    document.adoptNode(xmlDoc.documentElement),
    document.documentElement
);

关于RSS阅读器兼容性说明 #

• 如果你用上述方法直接输出application/xml类型的内容，主流支持URL订阅的RSS阅读器都可以正常识别
• 如果你是让阅读器爬取带JS的HTML页面等待动态生成XML，大部分不支持JS渲染的RSS阅读器无法识别，这种场景更推荐直接在fetch.php后端完成RSS生成、直接返回XML内容，兼容性最好。

内容的提问来源于stack exchange，提问作者Ali Sheikhpour