如何在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数据。虽然现在有许多第三方库可以很方便的帮助我们解决上述问题,但是在面对一些需要特殊处理的情况时,相比于修改三方库代码,可能我分享的这种方式更容易实现。

相关推荐
江城开朗的豌豆15 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
江城开朗的豌豆27 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了27 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆33 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆33 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆34 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆35 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
前端 贾公子42 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆1 小时前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山1 小时前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js