Socket
Socket
Sign inDemoInstall

html-to-json-parser

Package Overview
Dependencies
1
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

html-to-json-parser

This library converts HTML to JSON or JSON to HTML tree


Version published
Maintainers
1
Weekly downloads
14,372
decreased by-23.54%

Weekly downloads

Readme

Source

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

Keywords

FAQs

Last updated on 20 Feb 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc