鸿蒙开发——使用ArkTs处理XML文本

1、概 述

XML（可扩展标记语言）是一种用于描述数据的标记语言，旨在提供一种通用的方式来传输和存储数据，特别是Web应用程序中经常使用的数据。XML并不预定义标记。因此，XML更加灵活，并且可以适用于广泛的应用领域。

XML文档由元素（element）、属性（attribute）和内容（content）组成。

• • 内容则是元素包含的数据或子元素。

  • 属性提供了有关元素的其他信息。

  • 元素指的是标记对，包含文本、属性或其他元素。

XML还可以通过使用XML Schema或DTD（文档类型定义）来定义文档结构。这些机制允许开发人员创建自定义规则以验证XML文档是否符合其预期的格式。

XML还支持命名空间、实体引用、注释、处理指令等特性，使其能够灵活地适应各种数据需求。

语言基础类库提供了XML相关的基础能力，包括：XML的生成、XML的解析和XML的转换。

2、生成XML

一个生成XML的示例如下（关注 9 ~ 41行，genXml方法）：

import { xml, util } from '@kit.ArkTS';@Entry@Component@Previewstruct Index {  @State result: string = '';  genXml() {    // 方式1：基于Arraybuffer构造XmlSerializer对象    let arrayBuffer: ArrayBuffer = new ArrayBuffer(2048); // 创建一个2048字节的缓冲区    let thatSer: xml.XmlSerializer = new xml.XmlSerializer(arrayBuffer); // 基于Arraybuffer构造XmlSerializer对象    // 方式2：基于DataView构造XmlSerializer对象    // let arrayBuffer: ArrayBuffer = new ArrayBuffer(2048);    // let dataView: DataView = new DataView(arrayBuffer);    // let thatSer: xml.XmlSerializer = new xml.XmlSerializer(dataView);    thatSer.setDeclaration(); // 写入xml的声明    thatSer.startElement('bookstore'); // 写入元素开始标记    thatSer.startElement('book'); // 嵌套元素开始标记    thatSer.setAttributes('category', 'COOKING'); // 写入属性及属性值    thatSer.startElement('title');    thatSer.setAttributes('lang', 'en');    thatSer.setText('Everyday'); // 写入标签值    thatSer.endElement(); // 写入结束标记    thatSer.startElement('author');    thatSer.setText('Giana');    thatSer.endElement();    thatSer.startElement('year');    thatSer.setText('2005');    thatSer.endElement();    thatSer.endElement();    thatSer.endElement();    let view: Uint8Array = new Uint8Array(arrayBuffer); // 使用Uint8Array读取arrayBuffer的数据    let textDecoder: util.TextDecoder = util.TextDecoder.create(); // 调用util模块的TextDecoder类    let res: string = textDecoder.decodeToString(view); // 对view解码    // res输出结果    this.result = res;  }  build() {    Column() {      Row() {        Button('生成XML')          .onClick(() => {            this.genXml();          })          .width('100%')      }      .width('100%')      Row() {        Text(this.result)          .width('100%')          .padding(10)          .borderColor(Color.Gray)          .borderWidth(1)      }.width('100%')    }    .height('100%')  }}

效果如下：

3、解析XML

对于XML的解析，一般包括

1. 解析XML标签和标签值；

2. 解析XML属性和属性值

3. 解析XML事件类型和元素深度。

XML模块提供XmlPullParser类对XML文件解析，输入为含有XML文本的ArrayBuffer或DataView，输出为解析得到的信息。

下面分别针对这三种情况做示例讨论。

👉🏻 解析标签与标签内的值

一个解析XML标签和标签值的Demo如下（关注 9 ~ 36行，parseXML方法）：​​​​​​​

import { xml, util } from '@kit.ArkTS';@Entry@Component@Previewstruct Index {  @State result: string = '';  parseXml() {  // xml案例    let strXml: string =      '<?xml version="1.0" encoding="utf-8"?>' +        '<note importance="high" logged="true">' +        '<title>Play</title>' +        '<lens>Work</lens>' +        '</note>';    let textEncoder: util.TextEncoder = new util.TextEncoder();    let arrBuffer: Uint8Array = textEncoder.encodeInto(strXml); // 对数据编码，防止包含中文字符乱码    // 方式1：基于ArrayBuffer构造XmlPullParser对象    let that: xml.XmlPullParser = new xml.XmlPullParser(arrBuffer.buffer as object as ArrayBuffer, 'UTF-8');    // 方式2：基于DataView构造XmlPullParser对象    // let dataView: DataView = new DataView(arrBuffer.buffer as object as ArrayBuffer);    // let that: xml.XmlPullParser = new xml.XmlPullParser(dataView, 'UTF-8');    let str: string = '';    // 自定义回调函数，本例直接打印出标签及标签值。    const  func = (name: string, value: string): boolean => {      str = name + value + '\n';      this.result += str;      return true; //true:继续解析 false:停止解析    }    let options: xml.ParseOptions = {supportDoctype:true, ignoreNameSpace:true, tagValueCallbackFunction:func};    that.parse(options);  }  build() {    Column() {      Row() {        Button('解析XML')          .onClick(() => {            this.parseXml();          })          .width('100%')      }      .width('100%')      Row() {        Text(this.result)          .width('100%')          .padding(10)          .borderColor(Color.Gray)          .borderWidth(1)      }.width('100%')    }    .height('100%')  }}

效果如下：

👉🏻 解析XML属性与属性值

一个解析XML属性和属性值的Demo如下（关注 9 ~ 30行，parseXML方法）：​​​​​​​

import { xml, util } from '@kit.ArkTS';@Entry@Component@Previewstruct Index {  @State result: string = '';  parseXml() {    let strXml: string =      '<?xml version="1.0" encoding="utf-8"?>' +        '<note importance="high" logged="true">' +        '    <title>Play</title>' +        '    <title>Happy</title>' +        '    <lens>Work</lens>' +        '</note>';    let textEncoder: util.TextEncoder = new util.TextEncoder();    let arrBuffer: Uint8Array = textEncoder.encodeInto(strXml); // 对数据编码，防止包含中文字符乱码    let that: xml.XmlPullParser = new xml.XmlPullParser(arrBuffer.buffer as object as ArrayBuffer, 'UTF-8');    let str: string = '';    const func = (name: string, value: string): boolean => {      str += name + ' ' + value + ' \n';      return true; // true:继续解析 false:停止解析    }    let options: xml.ParseOptions = {supportDoctype:true, ignoreNameSpace:true, attributeValueCallbackFunction:func};    that.parse(options);    this.result = str; // 一次打印出所有的属性及其值  }  build() {    Column() {      Row() {        Button('解析XML')          .onClick(() => {            this.parseXml();          })          .width('100%')      }      .width('100%')      Row() {        Text(this.result)          .width('100%')          .padding(10)          .borderColor(Color.Gray)          .borderWidth(1)      }.width('100%')    }    .height('100%')  }}

效果如下：

👉🏻 解析XML事件类型和元素深度

一个解析XML事件类型和元素深度的Demo如下（关注 9 ~ 30行，parseXML方法）：​​​​​​​

import { xml, util } from '@kit.ArkTS';@Entry@Component@Previewstruct Index {  @State result: string = '';  parseXml() {    let strXml: string =      '<?xml version="1.0" encoding="utf-8"?>' +        '<note importance="high" logged="true">' +        '<title>Play</title>' +        '</note>';    let textEncoder: util.TextEncoder = new util.TextEncoder();    let arrBuffer: Uint8Array = textEncoder.encodeInto(strXml); // 对数据编码，防止包含中文字符乱码    let that: xml.XmlPullParser = new xml.XmlPullParser(arrBuffer.buffer as object as ArrayBuffer, 'UTF-8');    let str: string  = '';    const func = (name: xml.EventType, value: xml.ParseInfo): boolean => {      str = name + ' ' + value.getDepth() + '\n'; // getDepth 获取元素的当前深度      this.result += str;      return true; //true:继续解析 false:停止解析    }    let options: xml.ParseOptions = {supportDoctype:true, ignoreNameSpace:true, tokenValueCallbackFunction:func};    that.parse(options);  }  build() {    Column() {      Row() {        Button('解析XML')          .onClick(() => {            this.parseXml();          })          .width('100%')      }      .width('100%')      Row() {        Text(this.result)          .width('100%')          .padding(10)          .borderColor(Color.Gray)          .borderWidth(1)      }.width('100%')    }    .height('100%')  }}

效果如下：

其中对输出结果解释如下：​​​​​​​

 0 0 // 0：<?xml version="1.0" encoding="utf-8"?> 对应事件类型        START_DOCUMENT值为0  0：起始深度为0 2 1 // 2：<note importance="high" logged="true"> 对应事件类型START_TAG值为2       1：深度为1 2 2 // 2：<title>对应事件类型START_TAG值为2                                       2：深度为2 4 2 // 4：Play对应事件类型TEXT值为4                                               2：深度为2 3 2 // 3：</title>对应事件类型END_TAG值为3                                        2：深度为2 3 1 // 3：</note>对应事件类型END_TAG值为3                                         1：深度为1（与<note对应>） 1 0 // 1：对应事件类型END_DOCUMENT值为1                                           0：深度为0

【 解析选项参数 】

通过上面三个例子，我们可以观察到，核心都涉及到xml.ParseOptions选项参数。通过这个参数，我们可以设置对应的回调函数和一些解析行为。ParseOptions参数总结如下：

名称	类型	说明
supportDoctype	boolean	是否解析文档类型，默认false，表示不解析。
ignoreNameSpace	boolean	是否忽略命名空间，默认false，表示不忽略。
tagValueCallbackFunction	(name: string, value: string) => boolean	解析开始标签、标签值和结束标签，默认undefined，表示不解析。
attributeValueCallbackFunction	(name: string, value: string) => boolean	解析属性和属性值，默认undefined，表示不解析。
tokenValueCallbackFunction	(eventType: EventType, value: ParseInfo) => boolean	解析元素事件类型(EventType)和ParseInfo属性，默认undefined，表示不解析。

其中EventType是事件类型枚举，定义如下：

名称	值	说明
START_DOCUMENT	0	启动文件事件。
END_DOCUMENT	1	结束文件事件。
START_TAG	2	启动标签事件。
END_TAG	3	结束标签事件。
TEXT	4	文本事件。
CDSECT	5	CDATA事件。
COMMENT	6	XML注释事件。
DOCDECL	7	XML文档类型声明事件。
INSTRUCTION	8	XML处理指令声明事件。
ENTITY_REFERENCE	9	实体引用事件。
WHITESPACE	10	空白事件。

4、转换XML为JSON对象

将XML文本转换为JSON对象可以更轻松地处理和操作数据，并且更适合在JS应用程序中使用。

语言基础类库提供ConvertXML类将XML文本转换为JSON对象，输入为待转换的XML字符串及转换选项，输出为转换后的JSON对象。

一个转换示例如下：​​​​​​​

import { convertxml } from '@kit.ArkTS';@Entry@Component@Previewstruct Index {  @State result: string = '';  convertXML() {    let xml: string =      '<?xml version="1.0" encoding="utf-8"?>' +        '<note importance="high" logged="true">' +        '    <title>Happy</title>' +        '    <todo>Work</todo>' +        '    <todo>Play</todo>' +        '</note>';    let options: convertxml.ConvertOptions = {      // trim: false 转换后是否删除文本前后的空格，否      // declarationKey: "_declaration" 转换后文件声明使用_declaration来标识      // instructionKey: "_instruction" 转换后指令使用_instruction标识      // attributesKey: "_attributes" 转换后属性使用_attributes标识      // textKey: "_text" 转换后标签值使用_text标识      // cdataKey: "_cdata" 转换后未解析数据使用_cdata标识      // docTypeKey: "_doctype" 转换后文档类型使用_doctype标识      // commentKey: "_comment" 转换后注释使用_comment标识      // parentKey: "_parent" 转换后父类使用_parent标识      // typeKey: "_type" 转换后元素类型使用_type标识      // nameKey: "_name" 转换后标签名称使用_name标识      // elementsKey: "_elements" 转换后元素使用_elements标识      trim: false,      declarationKey: "_declaration",      instructionKey: "_instruction",      attributesKey: "_attributes",      textKey: "_text",      cdataKey: "_cdata",      doctypeKey: "_doctype",      commentKey: "_comment",      parentKey: "_parent",      typeKey: "_type",      nameKey: "_name",      elementsKey: "_elements"    }    let conv: convertxml.ConvertXML = new convertxml.ConvertXML();    let result: object = conv.convertToJSObject(xml, options);    let strRes: string = JSON.stringify(result); // 将js对象转换为json字符串，用于显式输出    console.info(strRes);    this.result = strRes;  }  build() {    Column() {      Row() {        Button('解析XML')          .onClick(() => {            this.convertXML();          })          .width('100%')      }      .width('100%')      Row() {        Text(this.result)          .width('100%')          .padding(10)          .borderColor(Color.Gray)          .borderWidth(1)      }.width('100%')    }    .height('100%')  }}

效果如下：