yousufkalim/html-to-json

This library converts HTML to JSON tree

HTML to JSON

This library is capable to convert HTML string/element to JSON/JS Object or JSON to HTML.

Features

• Convert HTML to JSON or JavaScript Object
• Convert JSON or JavaScript Object to HTML

Example

From

    <div class="container">
      <ul>
          <li>Hello <strong>World</strong></li>
      </ul>
    </div>

To

    {
      "type": "div",
      "attributes": {
        "class": "container"
      },
      "content": [
        {
          "type": "ul",
          "content": [
            {
              "type": "li",
              "content": [
                "Hello ",
                {
                  "type": "strong",
                  "content": [
                    "World"
                  ]
                }
              ]
            }
          ]
        }
      ]
    }

Installation

Install html-to-json-parser with npm/yarn

  npm install html-to-json-parser // npm
  yarn add html-to-json-parser // yarn

Usage/Examples

Convert HTML to JSON or JavaScript Object

// Imports
import { HTMLToJSON } from 'html-to-json-parser'; // ES6
const { HTMLToJSON } = require('html-to-json-parser'); // CommonJS

// Data
const element = '<div><ul><li>Hello <strong>World</strong></li></ul></div>'; // HTML string
const element = document.querySelector('div'); // HTML element

// Conversion
let result = await HTMLToJSON(element, true); // Default: false - true: return JSON, false: return JS Object

Convert JSON to HTML using JavaScript

// Imports
import { JSONToHTML } from 'html-to-json-parser'; // ES6
const { JSONToHTML } = require('html-to-json-parser'); // CommonJS

// Data: JSON or JS Object
const data = {
  type: "div",
  attributes: {
    class: "container"
  },
  content: [
    {
      type: "ul",
      content: [
        {
          type: "li",
          content: [
            "Hello ",
            {
              type: "strong",
              content: [
                "World"
              ]
            }
          ]
        }
      ]
    }
  ]
};

// Conversion
let result = await JSONToHTML(data, false); // Default: true - true: return HTML String, false: return HTML Element

Convert JSON to HTML using TypeScript

// Imports
import { JSONToHTML, JSONType } from 'html-to-json-parser'; // ES6
const { JSONToHTML, JSONType } = require('html-to-json-parser'); // CommonJS

// Data: JSON or JS Object
const data: JSONType = {
  type: "div",
  attributes: {
    class: "container"
  },
  content: [
    {
      type: "ul",
      content: [
        {
          type: "li",
          content: [
            "Hello ",
            {
              type: "strong",
              content: [
                "World"
              ]
            }
          ]
        }
      ]
    }
  ]
};

// Conversion
let result = await JSONToHTML(data, false); // Default: true - true: return HTML String, false: return HTML Element

Contributing

• Fork it!
• Create your feature branch: git checkout -b my-new-feature
• Commit your changes: git commit -am 'Add some feature'
• Push to the branch: git push origin my-new-feature
• Submit a pull request :D

Author

html-to-json-parser © Yousuf
Authored and maintained by Yousuf Kalim.

GitHub @yousufkalim · LinkedIn @yousufkalim

License

MIT