# 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模板字符串为可操作对象的库

<p>
    <a href="https://zxl20070701.github.io/toolbox/#/npm-download?packages=xhtml-to-json&interval=7">
        <img src="https://img.shields.io/npm/dm/xhtml-to-json.svg" alt="downloads">
    </a>
    <a href="https://www.npmjs.com/package/xhtml-to-json">
        <img src="https://img.shields.io/npm/v/xhtml-to-json.svg" alt="npm">
    </a>
    <a href="https://github.com/oi-contrib/xhtmlToJson" target='_blank'>
        <img alt="GitHub repo stars" src="https://img.shields.io/github/stars/oi-contrib/xhtmlToJson?style=social">
    </a>
</p>

<img src="https://nodei.co/npm/xhtml-to-json.png?downloads=true&amp;downloadRank=true&amp;stars=true" alt="NPM">

## 如何使用？

```
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<index>   孩子结点
    "preNode":    index          前一个兄弟结点
    "nextNode":   index          后一个兄弟结点

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

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

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

### toJson()

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

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

 比如template是：

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

结果就是：

```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) 走一步，再走一步