A wrapper around htmlparser2 that adds source range information to the AST
npm install @ciolabs/htmlparser2-source> A wrapper around htmlparser2 that adds source range information to the AST.
``
npm install @ciolabs/htmlparser2-source
`typescript
import { parseDocument } from '@ciolabs/htmlparser2-source';
const html = '
const document = parseDocument(html);
`
Parses HTML and returns a document with source range information attached to each element.
#### Parameters
- data (string) - The HTML string to parseoptions
- (Options, optional) - Parser options that inherit all htmlparser2 ParserOptions and DomHandlerOptions
#### Returns
Returns a SourceDocument with enhanced elements that include source range information.
This will add in the missing close tags into the AST. Note, because they don't exist in the source, they will have index positions of -1.
`typescript
import { parseDocument, nodeToString } from '@ciolabs/htmlparser2-source';
const html = '
const document = parseDocument(html, { autofix: true });
console.log(nodeToString(document)); //=>
Types
$3
Enhanced HTML elements that include source range information:
typescript
type SourceElement = {
source: {
openTag: {
startIndex: number;
endIndex: number;
data: string;
name: string;
isSelfClosing: boolean;
};
closeTag: {
startIndex: number;
endIndex: number;
data: string;
name: string;
} | null;
attributes: Array<{
name: {
startIndex: number;
endIndex: number;
data: string;
};
value: {
startIndex: number;
endIndex: number;
data: string;
} | null;
quote: '"' | "'" | null | undefined;
source: {
startIndex: number;
endIndex: number;
data: string;
};
}>;
};
children: SourceChildNode[];
};
`$3
Enhanced document with position utilities:
typescript
type SourceDocument = {
children: SourceChildNode[];
offsetToPosition(offset: number): { line: number; character: number };
};
`Utility Functions
$3
Converts a parsed node back to its HTML string representation.
typescript
import { parseDocument, nodeToString } from '@ciolabs/htmlparser2-source';const html = '
content';
const document = parseDocument(html);console.log(nodeToString(document)); // '
content'
`$3
The package exports several type guard functions:
-
- Check if node is a SourceElement
- isText(node) - Check if node is a text node
- isComment(node) - Check if node is a comment node
- isDocument(node) - Check if node is a SourceDocument
- isCDATA(node) - Check if node is a CDATA section
- isDirective(node) - Check if node is a processing instruction
- isDoctype(node)` - Check if node is a doctype declaration