angular-html-parser
Advanced tools
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.
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);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 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.
An HTML parser extracted from Angular with some modifications
# using npm
npm install --save angular-html-parser
# using yarn
yarn add angular-html-parser
import {parse} from 'angular-html-parser';
const {rootNodes, errors} = parse(`
<!DOCTYPE html>
<html>
<head>
<title>Hello world!</title>
</head>
<body>
<div>Hello world!</div>
</body>
</html>
`);
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,
attrs: Array<{prefix: string; name: string; value?: string | undefined}>
) => void | ng.TagContentType;
/**
* tokenize angular control flow block syntax
*/
tokenizeAngularBlocks?: boolean,
/**
* tokenize angular let declaration syntax
*/
tokenizeAngularLetDeclaration?: boolean,
}
CDATA nodeDocType nodenameSpan field to Element and AttributeComment#sourceSpan<!...>, <?...>)type property to nodes# build
yarn run build
# test
yarn run test
MIT © Ika
17.0.1 (2023-11-08)
| Commit | Type | Description | | -- | -- | -- | | 5c6f3f8ec0 | fix | Don't override the backend when using the InMemoryWebAPI (#52425) |
| Commit | Type | Description | | -- | -- | -- | | 70d30c28e0 | fix | Add support for ng-templates with i18n attributes (#52597) | | 4f125c5f9a | fix | Switches to multiple passes to fix several reported bugs (#52592) |
Web Frameworks: the internet frontier.<br/> These are the voyages of the framework Angular.<br/> Its continuing mission:<br/> To explore strange, new technologies.<br/> To seek out new users and new applications.<br/> To boldly go where no web framework has gone before.<br/>
In honor of v17.0.1
______
___.--------'------`---------.____
_.---'----------------------------------`---.__
.'___=]===========================================
,-----------------------..__/.' >--.______ _______.---'
]====================<==||(__) .' `------'
`-----------------------`' ----.___--/
/ /---' `/
/_______(______________________/
`-------------.--------------.'
\________|_.-'
Live long and prosper 🖖🏻
<!-- CHANGELOG SPLIT MARKER --><a name="17.0.0"></a>
FAQs
A HTML parser extracted from Angular with some modifications
The npm package angular-html-parser receives a total of 182,920 weekly downloads. As such, angular-html-parser popularity was classified as popular.
We found that angular-html-parser demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.