专栏首页WebJ2EEJS:XML 解析

JS:XML 解析

1. 动机 ?

jQuery 源码分析时,不小心撞上了!

图1-1:jQuery.parseXML 源码

2. DOMParser

The DOMParser interface provides the ability to parse XML or HTML source code from a string into a DOM Document. https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

2.1. API:

let domparser = new DOMParser();
let doc = domparser.parseFromString(string, mimeType);
// Return:
// Either Document or XMLDocument 
// depending on the mimeType argument.

2.2. 浏览器兼容性:

2.3. 示例:

XML:

<?xml version="1.0"?>
<catalog>
   <book id="bk101">
      <author>Gambardella, Matthew</author>
      <title>XML Developer's Guide</title>
      <genre>Computer</genre>
      <price>44.95</price>
      <publish_date>2000-10-01</publish_date>
      <description>An in-depth look at creating applications 
      with XML.</description>
   </book>
   <book id="bk102">
      <author>Ralls, Kim</author>
      <title>Midnight Rain</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <publish_date>2000-12-16</publish_date>
      <description>A former architect battles corporate zombies, 
      an evil sorceress, and her own childhood to become queen 
      of the world.</description>
   </book>
   <book id="bk103">
      <author>Corets, Eva</author>
      <title>Maeve Ascendant</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <publish_date>2000-11-17</publish_date>
      <description>After the collapse of a nanotechnology 
      society in England, the young survivors lay the 
      foundation for a new society.</description>
   </book>
   <book id="bk104">
      <author>Corets, Eva</author>
      <title>Oberon's Legacy</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <publish_date>2001-03-10</publish_date>
      <description>In post-apocalypse England, the mysterious 
      agent known only as Oberon helps to create a new life 
      for the inhabitants of London. Sequel to Maeve 
      Ascendant.</description>
   </book>
   <book id="bk105">
      <author>Corets, Eva</author>
      <title>The Sundered Grail</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <publish_date>2001-09-10</publish_date>
      <description>The two daughters of Maeve, half-sisters, 
      battle one another for control of England. Sequel to 
      Oberon's Legacy.</description>
   </book>
   <book id="bk106">
      <author>Randall, Cynthia</author>
      <title>Lover Birds</title>
      <genre>Romance</genre>
      <price>4.95</price>
      <publish_date>2000-09-02</publish_date>
      <description>When Carla meets Paul at an ornithology 
      conference, tempers fly as feathers get ruffled.</description>
   </book>
   <book id="bk107">
      <author>Thurman, Paula</author>
      <title>Splish Splash</title>
      <genre>Romance</genre>
      <price>4.95</price>
      <publish_date>2000-11-02</publish_date>
      <description>A deep sea diver finds true love twenty 
      thousand leagues beneath the sea.</description>
   </book>
   <book id="bk108">
      <author>Knorr, Stefan</author>
      <title>Creepy Crawlies</title>
      <genre>Horror</genre>
      <price>4.95</price>
      <publish_date>2000-12-06</publish_date>
      <description>An anthology of horror stories about roaches,
      centipedes, scorpions  and other insects.</description>
   </book>
   <book id="bk109">
      <author>Kress, Peter</author>
      <title>Paradox Lost</title>
      <genre>Science Fiction</genre>
      <price>6.95</price>
      <publish_date>2000-11-02</publish_date>
      <description>After an inadvertant trip through a Heisenberg
      Uncertainty Device, James Salway discovers the problems 
      of being quantum.</description>
   </book>
   <book id="bk110">
      <author>O'Brien, Tim</author>
      <title>Microsoft .NET: The Programming Bible</title>
      <genre>Computer</genre>
      <price>36.95</price>
      <publish_date>2000-12-09</publish_date>
      <description>Microsoft's .NET initiative is explored in 
      detail in this deep programmer's reference.</description>
   </book>
   <book id="bk111">
      <author>O'Brien, Tim</author>
      <title>MSXML3: A Comprehensive Guide</title>
      <genre>Computer</genre>
      <price>36.95</price>
      <publish_date>2000-12-01</publish_date>
      <description>The Microsoft MSXML3 parser is covered in 
      detail, with attention to XML DOM interfaces, XSLT processing, 
      SAX and more.</description>
   </book>
   <book id="bk112">
      <author>Galos, Mike</author>
      <title>Visual Studio 7: A Comprehensive Guide</title>
      <genre>Computer</genre>
      <price>49.95</price>
      <publish_date>2001-04-16</publish_date>
      <description>Microsoft Visual Studio 7 is explored in depth,
      looking at how Visual Basic, Visual C++, C#, and ASP+ are 
      integrated into a comprehensive development 
      environment.</description>
   </book>
</catalog>

代码示例:

function travserse(nodes, callback, level=0){
  for (var i = 0; i < nodes.length; i++) {
    var node = nodes[i];
    callback(node, level);
    travserse(node.childNodes, callback, level+1);
  }
}

const xml = `...`;

// 清理掉多余的空格、换行符
const xmlNoWhiteChars = xml.replace(/\s*(?=<)|(?<=<)\s*|(?:\n|\r\n)/g, "");

// 解析为 XMLDocument
const parser = new DOMParser();
const xmldoc = parser.parseFromString(xmlNoWhiteChars, "text/xml");

// 遍历 XMLDocument
travserse(xmldoc.childNodes, function(node, level){
  console.log(`${(new Array(level*4)).join(" ")}${node.nodeName}(${node.nodeType}) - ${node.nodeValue}`);
})

运行结果:

2. Microsoft.XMLDOM

代码示例:

function travserse(nodes, callback, level){
  level = level || 0;
  for (var i = 0; i < nodes.length; i++) {
    var node = nodes[i];
    callback(node, level);
    travserse(node.childNodes, callback, level+1);
  }
}

// 解析为 XMLDocument
var xmldoc = new window.ActiveXObject( "Microsoft.XMLDOM" );
xmldoc.async = "false";
xmldoc.loadXML( xml );

// 遍历 XMLDocument
travserse(xmldoc.childNodes, function(node, level){
  console.log(
    (new Array(level*4)).join(" ") + 
    node.nodeName + 
    "(" + node.nodeType + ") - " + 
    node.nodeValue
  );
})

运行结果:

参考:

jquery-3.4.1.js 源码 caniuse: https://www.caniuse.com/#search=DOMParser msdn: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser w3c: https://w3c.github.io/DOM-Parsing/

本文分享自微信公众号 - WebJ2EE(WebJ2EE),作者:WEBJ2EE

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Spring周边:日志——中

    门面设计模式是面面向对象设计模式中的一种,日志框架采用的就是这种模式,类似JDBC的设计理念。它只提供一套接口规范,自身不负责日志功能的实现,目的是让使用者不需...

    WEBJ2EE
  • CSS:你真的会用 z-index 吗?

    所有的盒模型元素都处于三维坐标系中,除了我们常用的横坐标和纵坐标,盒模型元素还可以沿着“z 轴”层叠摆放,当他们相互覆盖时,z 轴顺序就变得十分重要。

    WEBJ2EE
  • React:Table 那些事(1)—— 写在前面

    WEBJ2EE
  • Oracle RAC环境下配置statspack

        Statspack是Oracle 9i时代的产物,对于监控与分析数据库性能有着跨里程碑的意义,是AWR的前身。在Oracle 10g后AWR取代了sta...

    Leshami
  • 选项卡

    河湾欢儿
  • 敏捷产品项目的开发经验

    敏捷开发越来越火热,但在实际应用当中很多时候都是只有敏捷的“形”,却缺少敏捷的“神”,还只是在摸索中。借鉴一种新的模式的时候,最好能够批判性的吸收其精华的部分,...

    公众号php_pachong
  • 来玩Play框架06 用户验证

    用户验证(User Authentification)复合的使用Play框架的数个功能,包括前面已经了解的表单和数据库,以及这篇文章里要提到的加密和会话。根据应...

    Vamei
  • 蓝桥杯嵌入式之LCD讲解

    LCD是液晶显示器,可以显示字符(包括汉字)、图片等,是嵌入式比较常用的模块,也是比赛必考的模块。因为LCD的功能很强大,所以LCD包含的函数也是非常多的。不过...

    用户5935416
  • Any.Run交互式恶意软件分析沙盒服务现向公众免费开放

    近日,名为Any.Run的交互式恶意软件分析沙盒服务宣布,其免费社区版本正式向公众开放。这样一来任何人只需简单的注册一个账号,就可以使用该平台实时的对某个特定文...

    FB客服
  • IDEA中创建和启动SpringBoot应用的正确姿势

    默认情况下,当IDEA检查到你的项目中有SpringBoot应用时,会提示你开启,如果你没开启,可以用以下方法开启。

    macrozheng

扫码关注云+社区

领取腾讯云代金券