Parse HTML into JSON
Try online 🚀 | Read the specification 📖
npm install page2json
import fs from 'fs'
import {parse} from 'page2json'
const html = fs.readFileSync('/webpage.html', {encoding: 'utf8'})
const json = parse(html)
console.log('👉', json)
Download page2json.js and put it in a <script>
tag. page2json will be accessible from window.page2json
.
const html = '<div>Hello world</div>'
const json = window.page2json.parse(html)
console.log('👉', json)
page2json bundles well with Browersify and Webpack.
<div class='post post-featured'>
<p>page2json parsed me...</p>
<!-- ...and I liked it. -->
</div>
[{
type: 'element',
tagName: 'div',
attributes: [{
key: 'class',
value: 'post post-featured'
}],
children: [{
type: 'element',
tagName: 'p',
attributes: [],
children: [{
type: 'text',
content: 'page2json parsed me...'
}]
}, {
type: 'comment',
content: ' ...and I liked it. '
}]
}]
Note: In this example, text nodes consisting of whitespace are not shown for readability.
page2json transforms HTML into JSON, that's it. page2json is synchronous and does not require any complicated callbacks.
page2json handles a lot of HTML's fringe cases, like:
- Closes unclosed tags
<p><b>...</p>
- Ignores extra closing tags
<span>...</b></span>
- Properly handles void tags like
<meta>
and<img>
- Properly handles self-closing tags like
<input/>
- Handles
<!doctype>
and<-- comments -->
- Does not parse the contents of
<script>
,<style>
, and HTML5<template>
tags
page2json does not cut corners and returns an accurate representation of the HTML supplied. To remove whitespace, post-process the JSON; check out an example script.
page2json can include the start and end positions of nodes in the parse output.
To enable this, you can pass parse
the parseDefaults
extended with includePositions: true
:
import { parse, parseDefaults } from 'page2json'
parse('<img>', { ...parseDefaults, includePositions: true })
/* =>
[
{
"type": "element",
"tagName": "img",
"attributes": [],
"children": [],
"position": {
"start": {
"index": 0,
"line": 0,
"column": 0
},
"end": {
"index": 5,
"line": 0,
"column": 5
}
}
}
]
*/
page2json provides a stringify
method. The following example parses the HTML to JSON then parses the JSON back into HTML.
import fs from 'fs'
import {parse, stringify} from 'page2json'
const html = fs.readFileSync('/webpage.html', {encoding: 'utf8'})
const json = parse(html)
fs.writeFileSync('/webpage.html', stringify(json))