Js读取input框的xml文件并由jq解析

说明

我文件是cnblogs文章备份导出的xml文件，目的我是想获取导出的xml的每篇文章的信息。

读取文件

html文件部分

<div>xml文件：<input type="file" name="xml" id="xml"></div>
<br>
<div><input type="button" id="submit" value="提交"></div>

js部分

$('#submit').click(function(){
    let obj = document.getElementById("xml");
    let file = obj.files[0];
    let fr = new FileReader();
    fr.readAsText(file);
    fr.onload = function(){
        console.log(fr.result);
    }
});

读取xml

xml虽然和html有很多不同，但是可以简答理解为html的严格版本。所以直接使用jq，读取元素的形式，是可以取到里面的内容的。
比如我想取出，<channel>标签中的<item>，可以这样写。

$(xml).find('channel item')

xml就是xml的文本，就是上面的fr.result的值。
结果如下：

S.fn.init(18) [item, item, item, item, item, item, item, item, item, item, item, item, item, item, item, item, item, item, prevObject: S.fn.init(2)]

下面是其中item中的节点列表。

childNodes: NodeList(8)
0: title
1: link
2: text
3: dc:creator
4: author
5: pubdate
6: guid
7: description

获取处理

现在打印下读取到item元素。

// 解析xml格式
function parseXml(xml){
    $(xml).find('channel item').each(function(index, value){
        console.log(value);
    });
}

<item>​
  <title>​新版PHP7安装redis扩展并在laravel中运用​</title>​
  <link>​"http://www.cnblogs.com/hxsen/archive/2020/04/20/12739781.html"
  <dc:creator>​houxin​</dc:creator>​
  <author>​houxin​</author>​
  <pubdate>​Mon, 20 Apr 2020 11:02:00 GMT​</pubdate>​
  <guid>​http://www.cnblogs.com/hxsen/archive/2020/04/20/12739781.html​</guid>​
  <description>​…​</description>​
</item>​
<item>​…​</item>​

现在，使用如下方式对元素进行取值。

// 解析xml格式
function parseXml(xml){
    $(xml).find('channel item').each(function(index, value){
        let title = $(this).find('title').text();
        let link = $(this).find('guid').text();
        let pubDate = $(this).find('pubdate').text();
        let description = $(this).find('description').text();
        console.log(title, link, pubDate);
    });
}