鸿蒙开发——使用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
@Preview
struct 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
@Preview
struct 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
@Preview
struct 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
@Preview
struct 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
@Preview
struct 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%')

  }
}

效果如下：