Js获取并解析input中的xml并提取CDATA文档

说明

xml文件是一个本地的文档，需要使用input框选择该文件，并使用js对文件做进一步的处理，才能提交给后台。
处理的内容包含xml的CDATA的内容，有关CDATA的解释，上一篇使用php处理的时候，已经做过讲解，如有需要可以翻看之前的文档。

读取文档

使用js读取input中的文件内容

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

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

其中fr.result就是xml的内容文本文件。

解析xml格式

本次解析使用的是DOMParser解析类。传入了text/xml，类型。进而告诉浏览器使用xml的方式解析。

// 解析xml格式
function parseXml(xml){
    let parser = new DOMParser();
    let xmlDoc = parser.parseFromString(xml, "text/xml");

    //提取数据
    let list = xmlDoc.getElementsByTagName('item');
    let newArticle = [];
    for(let i=0; i < list.length; i++){
        let row = list[i];
        let pubDate = moment(row.getElementsByTagName('pubDate')[0].textContent);

        newArticle.push({
             'title': row.getElementsByTagName('title')[0].textContent,
             'pubData': pubDate.format('YYYY-MM-DD HH:mm:ss'),
             'link': row.getElementsByTagName('guid')[0].textContent,
             'description': row.getElementsByTagName('description')[0].textContent,
        });

    }
    return newArticle;
}

这里的返回值就是提取的xml的各个标签的内容。这里列举以其中一条。

Array(6)
0: {title: "laravel框架简易对接网易163邮件", pubData: "2020-04-25 16:33:00", link: "http://www.cnblogs.com/hxsen/archive/2020/04/25/12773638.html", description: "### 准备工作↵- 申请网易邮箱并开通SMTP服务↵进入设置`POP3/SMTP/IMAP`，开通…ttps://learnku.com/docs/laravel/7.x/mail/7488)查看↵"}
...
length: 6

可以看出成功获取了，需要的值，而且自动去掉了<![CDATA[标记。

jq无法使用的原因

上面文章介绍了，使用jq的find形式解析的形式。它解析单纯的文本还是可以的。或者简单的文本还是可以的。
如果含有<![CDATA[格式的文本的话，jq的解析就显得比较业余了。它其实是拿xml当做html的形式获取内容。所有，html一些特性同样作用到这里。

• 缺点1
  使用.text()获取的值，不带注释。
• 缺点2
  使用.html()获取的值，虽然带上注释了，但是，某些字符会被转义。
  比如"，&，<，>会被转成"，&，<，>
• 缺点3
  获取的CDATA值，依然保留着<![CDATA[的两端标记。

所以，此时再用jq来操作的话，就显的进退两难了。