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

    @nojaja/htmlparser

    2.1.2 • Public • Published

    Gitpod Ready-to-Code

    NodeHtmlParser

    A forgiving HTML/XML/RSS parser written in JS for both the browser and NodeJS (yes, despite the name it works just fine in any modern browser). The parser can handle streams (chunked data) and supports custom handlers for writing custom DOMs/output.

    Installing

    npm install @nojaja/htmlparser
    

    migration

    ### v1.7.6 -> v2.1

    • DefaultHandler -> HtmlBuilder

    • result field

      • attribs -> attributes
      • attribs:'data' -> attributes.data:'data'
      • script.type='sctipt' -> script.type='tag'

    ex.

      script tag
            attribs: {
                language: 'javascript'
             },
             
              type: 'script'
       ->
            attributes: {
                language: [{
                  data: 'javascript',
                  type: 'text'
                }]
             },
             type: 'tag'       

    Running Tests

    Run tests under node:

    node runtests.js
    

    Run tests in browser:

    View runtests.html in any browser

    Usage In Node

    var htmlparser = require("htmlparser");
    var rawHtml = "Xyz <script language= javascript>var foo = '<<bar>>';< /  script><!--<!-- Waah! -- -->";
    var handler = new htmlparser.HtmlBuilder(function (error, dom) {
        if (error)
            [...do something for errors...]
        else
            [...parsing done, do something...]
    });
    var parser = new htmlparser.Parser(handler);
    parser.parseComplete(rawHtml);
    sys.puts(sys.inspect(handler.dom, false, null));

    Usage In Browser

    var handler = new Tautologistics.NodeHtmlParser.HtmlBuilder(function (error, dom) {
        if (error)
            [...do something for errors...]
        else
            [...parsing done, do something...]
    });
    var parser = new Tautologistics.NodeHtmlParser.Parser(handler);
    parser.parseComplete(document.body.innerHTML);
    alert(JSON.stringify(handler.dom, null, 2));

    Example output

    [ { raw: 'Xyz ', data: 'Xyz ', type: 'text' }
      , { raw: 'script language= javascript'
      , data: 'script language= javascript'
      , type: 'tag'
      , name: 'script'
      , attributes: { language: [{
                  data: 'javascript',
                  type: 'text'
                  }]
            }
      , children: 
         [ { raw: 'var foo = \'<bar>\';<'
           , data: 'var foo = \'<bar>\';<'
           , type: 'text'
           }
         ]
      }
    , { raw: '<!-- Waah! -- '
      , data: '<!-- Waah! -- '
      , type: 'comment'
      }
    ]

    Example output

    normal tag

    <div></div>
    [{'type': 'tag','name': 'div'}]

    text

    Xyz 
    [{type: 'text',data: 'Xyz '}]

    script tag

    <script languagejavascript>var foo = '<<bar>>';</ script> 
    [{
      type: 'tag',
      name: 'script',
      attributes: {
        language: [{
          data: 'javascript',
          type: 'text'
        }]
      },
      children: [{
        data: 'var foo = \'<<bar>>\';',
        type: 'text'
      }],
    }]

    Tag in tag

    <div><div>hoge</div></div>
    [{
      'type': 'tag',
      'name': 'div',
      'children': [{
        'type': 'tag',
        'name': 'div',
        'children': [{
          'type': 'text',
          'data': 'hoge'
        }]
      }]
    }]

    comment tag

    <!-- Waah! --> 
    [{data: ' Waah! ',type: 'comment'}]

    img tag

    <img src='hoge'>
    [{
      'type': 'tag',
      'name': 'img',
      attributes: {
        src: [{
          data: 'hoge',
          type: 'text'
        }]
      }
    }]

    not container

    <div />
    [{'type': 'tag', 'name': 'div'}]

    Example output v2.1

    normal tag

    <div></div>
    [{'type': 'tag','name': 'div',
      'parentNode': parent object,
      getElementById: function(id,recurse),
      getElementsByTagName: function(id,recurse,limit),
      getElementsByTagType: function(type,recurse,limit),
      getElements: function(options, recurse, limit),
      removeChild: function(element),
      createElement: function(type),
      appendChild: function(element),
      getAttribute: function(name),
      cloneElement: function(parentNode),
    }]

    mustache script tag

    {{#if true}}<div>{{hoge}}</div>{{/if}}
    [{
      'type': 'script',
      'langName': 'mustache',
      'name': 'if',
      'data': 'true',
      'children': [{
        'type': 'tag',
        'name': 'div',
        'children': [{
          'type': 'script',
          'langName': 'mustache',
          'data': 'hoge'
        }]
      }]
    }]

    singleMustache script tag

    {#if true}<div>{hoge}</div>{/if}
    [{
      'type': 'script',
      'langName': 'singleMustache',
      'name': 'if',
      'data': 'true',
      'children': [{
        'type': 'tag',
        'name': 'div',
        'children': [{
          'type': 'script',
          'langName': 'singleMustache',
          'data': 'hoge'
        }]
      }]
    }]

    Streaming To Parser

    while (...) {
        ...
        parser.parseChunk(chunk);
    }
    parser.done();

    Streaming To Parser in Node

    fs.createReadStream('./path_to_file.html').pipe(parser);

    Parsing RSS/Atom Feeds

    new htmlparser.RssHandler(function (error, dom) {
        ...
    });

    DefaultHandler Options

    Usage

    var handler = new htmlparser.HtmlBuilder(
          function (error) { ... }
        , { verbose: false, ignoreWhitespace: true }
        );

    Option: ignoreWhitespace

    Indicates whether the DOM should exclude text nodes that consists solely of whitespace. The default value is "false".

    Example: true

    The following HTML:

    <font>
        <br>this is the text
    <font>

    becomes:

    [ { raw: 'font'
      , data: 'font'
      , type: 'tag'
      , name: 'font'
      , children: 
         [ { raw: 'br', data: 'br', type: 'tag', name: 'br' }
         , { raw: 'this is the text\n'
           , data: 'this is the text\n'
           , type: 'text'
           }
         , { raw: 'font', data: 'font', type: 'tag', name: 'font' }
         ]
      }
    ]

    Example: false

    The following HTML:

    <font>
        <br>this is the text
    <font>

    becomes:

    [ { raw: 'font'
      , data: 'font'
      , type: 'tag'
      , name: 'font'
      , children: 
         [ { raw: '\n\t', data: '\n\t', type: 'text' }
         , { raw: 'br', data: 'br', type: 'tag', name: 'br' }
         , { raw: 'this is the text\n'
           , data: 'this is the text\n'
           , type: 'text'
           }
         , { raw: 'font', data: 'font', type: 'tag', name: 'font' }
         ]
      }
    ]

    Option: verbose

    Indicates whether to include extra information on each node in the DOM. This information consists of the "raw" attribute (original, unparsed text found between "<" and ">") and the "data" attribute on "tag", "script", and "comment" nodes. The default value is "true".

    Example: true

    The following HTML:

    <a href="test.html">xxx</a>

    becomes:

    [ { raw: 'a href="test.html"'
      , data: 'a href="test.html"'
      , type: 'tag'
      , name: 'a'
      , attribs: { href: 'test.html' }
      , children: [ { raw: 'xxx', data: 'xxx', type: 'text' } ]
      }
    ]

    Example: false

    The following HTML:

    <a href="test.html">xxx</a>

    becomes:

    [ { type: 'tag'
      , name: 'a'
      , attribs: { href: 'test.html' }
      , children: [ { data: 'xxx', type: 'text' } ]
      }
    ]

    Option: enforceEmptyTags

    Indicates whether the DOM should prevent children on tags marked as empty in the HTML spec. Typically this should be set to "true" HTML parsing and "false" for XML parsing. The default value is "true".

    Example: true

    The following HTML:

    <link>text</link>

    becomes:

    [ { raw: 'link', data: 'link', type: 'tag', name: 'link' }
    , { raw: 'text', data: 'text', type: 'text' }
    ]

    Example: false

    The following HTML:

    <link>text</link>

    becomes:

    [ { raw: 'link'
      , data: 'link'
      , type: 'tag'
      , name: 'link'
      , children: [ { raw: 'text', data: 'text', type: 'text' } ]
      }
    ]

    DomUtils

    TBD (see utils_example.js for now)

    getElementById

    var id = htmlparser.DomUtils.getElementById("x", dom);

    getElementsByTagName

    var name = htmlparser.DomUtils.getElementsByTagName("a", dom);

    getElements

    var clazz = htmlparser.DomUtils.getElements({class: "y" }, dom);
    var multiclass = htmlparser.DomUtils.getElements({
              class: function(value) {
                console.log(value);
                return (value && value.indexOf("h") > -1);
              }
            }, dom);

    getElementsByTagType

    var nested = htmlparser.DomUtils.getElements({
              tag_name: "d",
              id: "z",
              class: "w"
            }, dom);

    DomUtils v2.1

    getElementById

    var id = dom.getElementById("x");

    getElementsByTagName

    var name = dom.getElementsByTagName("a");

    getElements

    var clazz = dom.getElements({class: "y"});

    getElementsByTagType

    var nested = dom.getElements({ tag_name: "d", id: "z", class: "w" });

    Related Projects

    Loo king for CSS selectors to search the DOM? Try Node-SoupSelect, a port of SoupSelect to NodeJS: http://github.com/harryf/node-soupselect

    There's also a port of hpricot to NodeJS that uses HtmlParser for HTML parsing: http://github.com/silentrob/Apricot

    Install

    npm i @nojaja/htmlparser

    DownloadsWeekly Downloads

    8

    Version

    2.1.2

    License

    none

    Unpacked Size

    234 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar