Nebulous Puffy Marshmallows
    Wondering what’s next for npm?Check out our public roadmap! »

    @luvsic/himalaya

    1.2.0 • Public • Published

    Himalaya

    Parse HTML into JSON, add support for vue template

    npm Build Status Coverage Status Greenkeeper badge

    Try online 🚀 | Read the specification 📖

    Usage

    Node

    npm install @luvsic/himalaya
    import fs from 'fs'
    import {parse} from 'himalaya'
    const html = fs.readFileSync('/webpage.html', {encoding: 'utf8'})
    const json = parse(html)
    console.log('👉', json)

    Browser

    Download himalaya.js and put it in a <script> tag. Himalaya will be accessible from window.himalaya.

    const html = '<div>Hello world</div>'
    const json = window.himalaya.parse(html)
    console.log('👉', json)

    Himalaya bundles well with Browersify and Webpack.

    Example Input/Output

    <div class='post post-featured'>
      <p>Himalaya 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: 'Himalaya parsed me...'
        }]
      }, {
        type: 'comment',
        content: ' ...and I liked it. '
      }]
    }]

    Note: In this example, text nodes consisting of whitespace are not shown for readability.

    Features

    Synchronous

    Himalaya transforms HTML into JSON, that's it. Himalaya is synchronous and does not require any complicated callbacks.

    Handles Weirdness

    Himalaya 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

    Preserves Whitespace

    Himalaya 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.

    Line, column, and index positions

    Himalaya 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 'himalaya'
    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
          }
        }
      }
    ]
    */

    Going back to HTML

    Himalaya 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 'himalaya'
     
    const html = fs.readFileSync('/webpage.html', {encoding: 'utf8'})
    const json = parse(html)
    fs.writeFileSync('/webpage.html', stringify(json))

    Why "Himalaya"?

    First, my friends weren't helpful. Except Josh, Josh had my back.

    While I was testing the parser, I threw a download of my Twitter homepage in and got a giant JSON blob out. My code editor Sublime Text has a mini-map and looking at it sideways the data looked like a never-ending mountain range. Also, "himalaya" has H, M, L in it.

    Install

    npm i @luvsic/himalaya

    DownloadsWeekly Downloads

    1

    Version

    1.2.0

    License

    ISC

    Unpacked Size

    382 kB

    Total Files

    38

    Last publish

    Collaborators

    • avatar