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

downloads npm GitHub repo stars

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 孩子结点 "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) 走一步,再走一步