https://github.com/Jxck/html2json

html2json & json2html
https://github.com/Jxck/html2json

Last synced: 2 months ago
JSON representation

html2json & json2html

• Host: GitHub
• URL: https://github.com/Jxck/html2json
• Owner: Jxck
• Archived: true
• Created: 2011-10-01T21:15:58.000Z (about 13 years ago)
• Default Branch: master
• Last Pushed: 2021-10-23T16:10:56.000Z (almost 3 years ago)
• Last Synced: 2024-05-22T09:42:59.513Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 89.8 KB
• Stars: 718
• Watchers: 29
• Forks: 176
• Open Issues: 21
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-star-libs - Jxck / html2json

README

        
# html2json & json2html

## How to use

### browser

include htmlparser.js & html2json.js scripts:

```html

```

### node

```sh

$ npm install html2json

```

```javascript

var html2json = require('html2json').html2json;

var json2html = require('html2json').json2html;

```

### API

```javascript

json === html2json(document.body.innerHTML);

html === json2html(json);

console.assert(json === html);

```

### JSON format

every json has `node`

members of `node` are

- `root`

- `element`

- `text`

- `comment`

`root` node is the root of JSON, every JSON must have only one root `root`, could have `child`.

`element` node represents html element, could have `tag`, `attr`, `child`.

`text` node represents text element, could have `text`.

`comment` node represents commment element, could have `text`.

### Sample

html:

```html



sample text with inline tag



foo

goo




```


json:

```javascript

{

  node: 'root',

  child: [

    {

      node: 'element',

      tag: 'div',

      attr: { id: '1', class: 'foo' },

      child: [

        {

          node: 'element',

          tag: 'h2',

          child: [

            { node: 'text', text: 'sample text with ' },

            { node: 'element', tag: 'code', child: [{ node: 'text', text: 'inline tag' }] }

          ]

        },

        {

          node: 'element',

          tag: 'pre',

          attr: { id: 'demo', class: ['foo', 'bar'] },

          child: [{ node: 'text', text: 'foo' }]

        },

        {

          node: 'element',

          tag: 'pre',

          attr: { id: 'output', class: 'goo' },

          child: [{ node: 'text', text: 'goo' }]

        },

        {

          node: 'element',

          tag: 'input',

          attr: { id: 'execute', type: 'button', value: 'execute' }

        }

      ]

    }

  ]

}

```

## Dependencies

[htmlparser.js](https://github.com/blowsie/Pure-JavaScript-HTML5-Parser)

repositry includes this at `lib/` as git subtree.

## CHANGELOG

- 1.0.2

 - fix [#16](https://github.com/Jxck/html2json/issues/16) with merge [#17](https://github.com/Jxck/html2json/issues/17)

- 1.0.1

 - fix [#14](https://github.com/Jxck/html2json/issues/14)

before 1.0.0

- Basically inline tag is melted into text

- `Input`, `textarea`, `image` tags are act like block tag

## License

MIT