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无法使用的原因

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

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

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

posted @ 2020-04-28 21:46  houxin  阅读(656)  评论(0编辑  收藏  举报