html-to-json-pyz

Install

Bowser script

<script src="dist/HtmlToJson.js"></script>
<script>
 // 也可以用模板字符串 模板字符串是格式化字符串
       let data = HTMLCodeToJson.parse(
         `<div class="233123" id="12312">
            <h1>
              <div>
                <span>dddd</span>
              </div>
              <div>3333</div>
            </h1>
            <img src='123' />
         </div>`)
       console.log(JSON.parse(data));
</script>    

Nodejs

const { NodeHTMLCodeToJson } = require('html-to-json-pyz');

const jsonData = NodeHTMLCodeToJson.parse(`
    "<div>"+
    "<h1>Hellow World</h1>"+
    "<img src='123' />"+
    "</div>")
`);

console.log(jsonData)

Document

class NodeHTMLCodeToJson extends NodeCodeToJson {
    static rootObject: Array<any>;
    static arryDeepIndex: number;
    constructor(props: any);
    /**
     * @params {htmlString: String} html 标签内容字符串
     * @params {type: Boolean} default type=true; true为body标签，false,全部根节点（html）
     */
    static parse(htmlString: string, type?: boolean): string | object; 
}

解析示例

interface PyzDomParse {
    /**
     * @property {targetName: Element} 目标对象
     */
    tarName: Element;
    /**
     * @property  attributes 标签所有属性
     */
    attributes: {
        class: string;
        id: string;
    };
    /**
     * @property {children: Array<PyzDomParse>} 子元素
     */
    children: Array<PyzDomParse> 
    /**
     * @property {content: string} 标签内容
     */
    content: string;
    /**
     * @property {domc: number} 层级索引
     */
    domc: number;
}

console.log

[
    {
        "tarName": "div",
        "attributes": {
            "class": "233123",
            "id": "12312"
        },
        "children": [
            {
                "tarName": "h1",
                "attributes": {},
                "children": [
                    {
                        "tarName": "div",
                        "attributes": {},
                        "children": [
                            {
                                "tarName": "span",
                                "attributes": {},
                                "children": [],
                                "content": "dddd",
                                "domc": 3
                            }
                        ],
                        "content": "\n                dddd\n              ",
                        "domc": 2
                    },
                    {
                        "tarName": "div",
                        "attributes": {},
                        "children": [],
                        "content": "3333",
                        "domc": 3
                    }
                ],
                "content": "\n              \n                dddd\n              \n              3333\n            ",
                "domc": 1
            },
            {
                "tarName": "img",
                "attributes": {
                    "src": "123"
                },
                "children": [],
                "content": "",
                "domc": 3
            }
        ],
        "content": "\n            \n              \n                dddd\n              \n              3333\n            \n            \n         ",
        "domc": 0
    }
]

Development

• html-to-json

作者

• 彭一真

LICENSE

MIT