# xhtmlToJson
**Repository Path**: oi-contrib/xhtmlToJson
## Basic Information
- **Project Name**: xhtmlToJson
- **Description**: 一个解析xhtml模板字符串为可操作对象的库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-02-27
- **Last Updated**: 2025-03-01
## Categories & Tags
**Categories**: Uncategorized
**Tags**: xhtml, render, template
## README
# [xhtmlToJson](https://github.com/oi-contrib/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": 文本结点内容
}
```
返回的结果是一个数组,表示一系列结点,通过’关系属性‘辅助串联起来。
### toJson()
把当前的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](https://zxl20070701.github.io/notebook/home.html) 走一步,再走一步