其他分享
首页 > 其他分享> > Js获取并解析input中的xml并提取CDATA文档

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一些特性同样作用到这里。

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

标签:xml,fr,getElementsByTagName,Js,let,CDATA,解析,row
来源: https://www.cnblogs.com/hxsen/p/12797485.html