如何在JS中解析XML数据以及序列化

背景

最近工作中发现一些接口居然还在使用XML格式传递数据,用于一个表单数据。我需要先完成如下步骤:

  1. 解析xml获得数据后显示在表单中;
  2. 用户编辑后,调用接口前,还得转为xml格式;
  3. 将上述的XML数据转为字符串,返回给后端;

无奈后端大大不愿帮我转JSON,只能自己上手,偶然发现原生就解析的API,下面是简单的使用介绍。

解析XML

介绍一个JS原生的API-DOMParser。 简单的说DOMParser是一个类,通过new关键字调用后,返回一个parser。后续的解析工作由这个parser完成:

js 复制代码
const xmlStr = '<AAAA id="a" name="AAA"><BBB id="b">hey!</BBB></AAAA>';
const parser = new DOMParser();
const doc = parser.parseFromString(xmlStr, "application/xml");

写到这里大家脑海中可能会有一个疑问-怎么获取XML的数据呢?要解决这一个问题,需要先看看parseFromString返回是什么呢?

答案是一颗DOM树。如下图所示:

这里请允许我吐槽一下这个API的设计:new DOMParser -> parser -> parser.parseFromString,需要经过这么多步才能完成解析。。。

这是不是意味着我们可以通过熟悉的API去获取值了呢?下面简单尝试一下:

查询querySelector

注意:querySelector方法需要在parseFromString返回的DOM上调用,才能查到节点。

获取属性 getAttribute

就目前为止,DOM相关的API基本都能使用。如此就能根据实际需要将这颗DOM树转化为普通的JS对象了。本人实力有限,怕误导大家,就不贴代码了。

创建一颗XML版的DOM树

上面提到parser返回的是一颗,那么是不是用传统创建Element元素的API就行了呢?

经过实际检验发现HTML会忽略大小写。

OS:当初写到这步的时候,我的心是拔凉拔凉的。以为自己好不容易发现的新大陆,其实是一个死胡同。但是我突然灵光一现,意识到了一个问题

大家还记上面调用查询API的时候,是没有使用全局的document的。那么在这里我重新创建一个document对象,并通过它创建大写开头的标签是否可行呢?

惊不惊喜,意不意外。那这是为什么呢?

这个问题我们可以通过 document.contentType 来简单解答一下

MDN的解释:返回当前文档的 Content-Type(MIME) 类型。

具体原因后续如果我能找到,咱们再聊聊。

现在我们还需要把处理属性值和子节点

到目前为止,我们就剩最后一步-将xml树转化为字符串 这里介绍第二个API-XMLSerializer,具体使用见下面:

总结

本篇文章主要从我在工作中遇到的一个小问题-解析并序列化XML数据开启,简单分享了一下如何使用原生API,自由的处理xml数据。虽然现在有许多第三方库可以很方便的帮助我们解决上述问题,但是在面对一些需要特殊处理的情况时,相比于修改三方库代码,可能我分享的这种方式更容易实现。

相关推荐
Highcharts.js32 分钟前
Highcharts智能数据分析平台Orbit 多语言配置技术文档
java·前端·javascript·highcharts·orbit·智能数据分析·设置文档
非优秀程序员11 小时前
第07章 孙德良的阳谋|《互联网产品恩仇录》
javascript·后端
程序员大阳15 小时前
HTML+CSS+JS对话式实战(5)-活动管理页之查看报名名单的实现
javascript·css·html·查看报名名单
新*17 小时前
从一段 WebSocket 代码聊开:bytes 不是 zlib、binaryType 决定一切,15MB 大消息的零拷贝优化
javascript·python·websocket·性能优化·blob·zlib·arraybuffer
OpsEye18 小时前
别再挨个充会员了:多模型编码,最麻烦的从来不是选模型
javascript·ai编程
学以智用20 小时前
jsencrypt.js 完整详解
javascript
Hilaku1 天前
你们公司有 35 岁以上的前端吗?
前端·javascript·程序员
鸿蒙开发1 天前
小程序存档写到一半怎么办?双槽保存与损坏恢复实战
前端·javascript·react.js
知忆_IS1 天前
TerriaMap 开发实战04:MVT数据自定义符号化 - terriajs源码修改
javascript·webgis·terriamap·terriajs
云上工程笔记1 天前
SRT字幕一键转手绘动画:srt-whiteboard-animation的复刻实录
大数据·开发语言·javascript·人工智能·机器学习