mmm-html-parser

A ^riDiCuLoUsLy^ forgiving Html Parser prepared for ^deLiCiOuS^ consumption within ^your^ JavaScript / TypeScript project.

Installation

$ yarn add mmm-html-parser

$ npm install --save-dev mmm-html-parser

Why?

I needed an Html parser that allowed me to anatomize a complex html structure, modify it, and serialize it while maintaining it's original, nuanced format and structure.

Note: the ability to modify and serialize are not currently part of this library...but both are made easier

Features

• it's ^riDiCuLoUsLy^ forgiving...as in it will
  • parse partial html that fails to include closing tags
  • parse invalid attributes
  • parse invalid closing tags for void elements will still be parsed (e.g. <input></input> ...yep, even Amazon has these invalid buggers in their code)
  • parse vue, angular, etc despite their non-compliant html syntax
  • ignore all content with code and script elements
• generate advanced objects (optional) allows you to get an out-of-the-box tree structure of the parsed html
• use this library as a singleton or instance
• flexible options like
  • add, edit, or remove known void elements (e.g. <img>)
  • regex overrides (which I know is not the ideal approach) so you can use your own custom patterns
  • extending the TypeScript library (all non-public methods are 'protected' for your convenience)

Let's Get Real

• this is not the most performant parser out there (nor is it intended to be...though it could certainly be improved)

Getting Started

You installed the npm package, right? Awesome! Now it's time to try it out. Sure, you could check out the examples, but that requires navigating the project and a slew of extra clicks. Perhaps this is more to your liking:

Basic Example

new MmmHtmlParser().start('<input type="text" name="firstname" value="Mickey">');

Intermediate Example (Vue.js)

// typescript
const root: MmmHtmlParserResultRootI = new MmmHtmlParser().start(`<li class="item"><div :class="{'type-tag': model.type === 'Tag', 'type-text': model.type === 'Text'}" @click="toggle" @dblclick="changeType"></div></li>`);
console.log('root.tagsTotalCount: ', root.tagsTotalCount);
console.log('root.tagsIgnoredCount: ', root.tagsIgnoredCount);
console.log('root.tagsOpenedCount: ', root.tagsOpenedCount);
console.log('- root.tagsClosedCount: ', root.tagsClosedCount);
console.log('= tagsRemainingCount: ', (root.tagsOpenedCount - root.tagsClosedCount));
console[root.tagsErrorCount > 0 ? 'warn' : 'log']('! tagsErrorCount', root.tagsErrorCount);
 
// outputs
root.tagsTotalCount:  4
root.tagsIgnoredCount:  0
root.tagsOpenedCount:  2
- root.tagsClosedCount:  2
= tagsRemainingCount:  0
! tagsErrorCount 0

Coming Soon

• events
• a demo
• attribute parsing
• more edge-case support
• and always more forgiveness :blush: