html-to-article-json

Parses & normalizes html to a well-structured & easy to use article json format

Showing:

Popularity

Downloads/wk

78

GitHub Stars

52

Maintenance

Last Commit

5yrs ago

Contributors

4

Package

Dependencies

12

Size (min+gzip)

98.1KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

html-to-article-jsonBuild Status

html-to-article-json parses & normalizes html to a well-structured & easy to use article json format.

The parsing logic is based on real articles - with sometimes very weird html - so please open an issue if some html doesn't get parsed correctly!

Installation

npm install html-to-article-json

Usage

node.js

var htmlToArticleJson = require('html-to-article-json')();
var htmlString = '<p>Foo<b>bar</b></p>';
var articleJson = htmlToArticleJson(htmlString);

browserify

Using browseriy html-to-article-json can also use DOM as input in the browser!

var htmlToArticleJson = require('html-to-article-json')();
var domElement = document.querySelector('article');
var articleJson = htmlToArticleJson(domElement);

Format

article-json consists of a list of nodes, each node representing a block of content.

Please see the example (npm run example) for a simple WYSIWYG editor & the corresponding article json.

Text

{
  "type": "paragraph",
  "children": [{
    "type": "text",
    "content": "Hello, ",
    "href": null,
    "italic": false,
    "bold": false
  }, {
    "type": "text",
    "content": "mic.com",
    "href": "http://www.mic.com",
    "italic": true,
    "bold": false
  }]
}

The above is an example of a text node - corresponding to something like <p>Hello, <a href="mic.com"><b>mic.com</b></a>.

A text content node is defined by it's visual representation rather than it's code - so html-to-article-json will parse <a href="mic.com"><b>mic.com</b></a> and <b><a href="mic.com">mic.com</a></b> to the same json object.

Valid text nodes are paragraph, header1, header2, header3, header4, header5 & header6.

Embeds

{
  "type": "embed",
  "embedType": "youtube",
  "youtubeId": "eBYFOJxZx4Q",
  "caption": [{
    "type": "text",
    "content": "Here's a video from ",
    "href": null,
    "italic": false,
    "bold": false
  }, {
    "type": "text",
    "content": "mic.com",
    "href": "http://www.mic.com",
    "italic": true,
    "bold": false
  }]
}

The above is an example of an embed node - corresponding to a youtube embed. The caption format is the same as the children array we have in the Text example.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial