xhtmlToJson

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

如何使用？

``
npm install --save xhtml-to-json
`

然后直接使用即可：

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

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

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

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

### valueOf()

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

`js
let xhtmlValue = domTree.valueOf();
`

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

`js
{

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

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

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

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

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

$3

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

`js
let xhtmlJson = domTree.toJson();
`

比如template是：

`html

测试内容

• 
  内容一
  


• 
  内容二
  

`

结果就是：

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

版权

MIT License

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