前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS:XML 解析

JS:XML 解析

作者头像
WEBJ2EE
发布2019-12-31 14:40:43
8.1K0
发布2019-12-31 14:40:43
举报
文章被收录于专栏:WebJ2EEWebJ2EE

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:

代码语言:javascript
复制
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:

代码语言:javascript
复制
<?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>

代码示例:

代码语言:javascript
复制
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

代码示例:

代码语言:javascript
复制
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/

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-12-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 WebJ2EE 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档