xhtmlToJson

一个解析xhtml模板字符串为可操作对象的库

如何使用？

npm install --save xhtml-to-json

然后直接使用即可：

const { parseTemplate } = require("xhtml-to-json");

// noIgnore为true表示不忽略任何标签，默认false
let domTree = parseTemplate(template[, noIgnore]);

这样我们就获取了包含需要信息的json对象，其实就是模仿浏览器构建的一棵树。

需要注意的是：如果一个文本结点内容只包含回车，tab，空格等空白字符，会直接被忽视。

valueOf()

可以通过下面方法获取这颗树：

let xhtmlValue = domTree.valueOf();

xhtmlValue是一个数组（第一个元素为root，根节点，自动添加的），表示一个个节点，每个节点有如下属性：

{

   "type":       ['tag'|'text'] 节点类型

   // 关系属性
   "parentNode": index          父结点
   "childNodes": Array<index>   孩子结点
   "preNode":    index          前一个兄弟结点
   "nextNode":   index          后一个兄弟结点

   // 元素tag结点有效
   "attrs":{}                   当前结点的属性
   "name":                      节点名称

   // 文本text结点有效
   "content":                   文本结点内容
}

返回的结果是一个数组，表示一系列结点，通过’关系属性‘辅助串联起来。

toJson()

把当前的DOM树变成一个更可读的json数据：

let xhtmlJson = domTree.toJson();

比如template是：

<h2>
    测试内容
</h2>
<ul>
    <li>
        内容一
    </li>
    <li>
        内容二
    </li>
</ul>

结果就是：

[
  {
    "name": "h2",
    "attr": {},
    "children": ["测试内容"]
  },
  {
    "name": "ul",
    "attr": {},
    "children": [
      {
        "name": "li",
        "attr": {},
        "children": ["内容一"]
      },
      {
        "name": "li",
        "attr": {},
        "children": ["内容二"]
      }
    ]
  }
]

版权

MIT License

Copyright (c) zxl20070701 走一步，再走一步