angular-html-parser

What is angular-html-parser?

The angular-html-parser npm package is a tool for parsing Angular HTML templates. It allows developers to parse, traverse, and manipulate Angular HTML templates programmatically.

What are angular-html-parser's main functionalities?

Parsing HTML

This feature allows you to parse an Angular HTML template into an Abstract Syntax Tree (AST). The code sample demonstrates how to parse a simple HTML string containing Angular template syntax.

const { parse } = require('angular-html-parser');
const html = '<div>{{ title }}</div>';
const result = parse(html);
console.log(result);

Traversing the AST

This feature allows you to traverse the AST generated from parsing an Angular HTML template. The code sample demonstrates how to visit different types of nodes in the AST and log their details.

const { parse } = require('angular-html-parser');
const { visitAll } = require('angular-html-parser/lib/compiler/src/ml_parser/ast');
const html = '<div>{{ title }}</div>';
const result = parse(html);
visitAll({
  visitElement: (element) => console.log('Element:', element.name),
  visitText: (text) => console.log('Text:', text.value),
  visitBoundText: (boundText) => console.log('BoundText:', boundText.value),
}, result.rootNodes);

Manipulating the AST

This feature allows you to manipulate the AST generated from parsing an Angular HTML template. The code sample demonstrates how to change the tag name of an element from 'div' to 'span'.

const { parse } = require('angular-html-parser');
const { visitAll } = require('angular-html-parser/lib/compiler/src/ml_parser/ast');
const html = '<div>{{ title }}</div>';
const result = parse(html);
visitAll({
  visitElement: (element) => {
    if (element.name === 'div') {
      element.name = 'span';
    }
  }
}, result.rootNodes);
console.log(result);

Other packages similar to angular-html-parser

htmlparser2

htmlparser2 is a fast and forgiving HTML/XML parser. It is not specific to Angular templates but can be used to parse any HTML or XML. Compared to angular-html-parser, it is more general-purpose and does not provide specific support for Angular template syntax.

parse5

parse5 is a versatile and widely-used HTML parser that fully conforms to the HTML5 specification. Like htmlparser2, it is not specific to Angular templates but can handle any HTML. It is more robust and standards-compliant compared to angular-html-parser.

README

angular-html-parser

A HTML parser extracted from Angular with some modifications

Changelog

Install

# using npm
npm install --save angular-html-parser

# using yarn
yarn add angular-html-parser

Usage

const ngHtmlParser = require('angular-html-parser');

const { rootNodes, errors } = ngHtmlParser.parse('<div>hello world</div>');

API

declare function parse(input: string, options?: Options): ng.ParseTreeResult;

interface Options {
  /**
   * any element can self close
   *
   * defaults to false
   */
  canSelfClose?: boolean;
  /**
   * support [`htm`](https://github.com/developit/htm) component closing tags (`<//>`) 
   *
   * defaults to false
   */
  allowHtmComponentClosingTags?: boolean;
  /**
   * do not lowercase tag names before querying their tag definitions
   *
   * defaults to false
   */
  isTagNameCaseSensitive?: boolean;
  /**
   * customize tag content type
   *
   * defaults to the content type defined in the HTML spec
   */
  getTagContentType?: (tagName: string, prefix: string, hasParent: boolean) => void | ng.TagContentType,
}

Modifications

• add CDATA node
• add DocType node
• add nameSpan field to Element and Attribute
• allow case-insensitive closing tags for non-foreign elements
• fix Comment#sourceSpan
• support bogus comments (<!...>, <?...>)
• support full named entities

Development

# build
yarn run build

# test
yarn run test

License

MIT © Ika