Implement an HTML parser in pure JS(TS) without relying on any libraries. Supports basic functionalities such as querying, adding, modifying, removing elements and converting to code.
install:
npm i pure-js-html-parseruse:
import { Parser } from 'pure-js-html-parser'
const txt = `<div a='a' b="2">a</div>`
const $ = new Parser(txt)
// Get the parsed data
$.parserData
/**
* [
{
tag: "div",
value: "",
type: "tag",
children: [
{
tag: "",
value: "a",
type: "text",
children: [],
attributes: [],
},
],
attributes: [
{
key: "a",
value: "a",
},
{
key: "b",
value: "2",
},
],
},
]
*/export interface IParseHtmlAttribute {
key: string;
value: string | undefined;
}
export type IParseValueType = "tag" | "text";
export interface IParseHtmlItem {
tag: string;
value: string;
type: IParseValueType;
children: IParseHtmlItem[];
attributes: IParseHtmlAttribute[];
}If the node contains a tag:<div id="a'"></div>, then the type is tag. The output is:
{
tag: 'div',
value: '',
type: 'tag',
children: [],
attributes: [ { key: 'id', value: 'a' } ]
}If it is text, such as the content a or the a within <div>a</div>, then the type is text. The output is:
{
tag: '',
value: 'a',
type: 'text',
children: [],
attributes: []
}const txt = `<div class="a" id="a" a='a' b="2">a</div>`
const $ = new Parser(txt)
// query tag
$.query('div')
// query class
$.query('.a')
// query id
$.query('#a')
// query all
$.queryAll('.a')const txt = `<div class="a" id="a" a='a' b="2">a</div>`
const $ = new Parser(txt)
// Insert an element at the end of the ".a" element
$.push({
tag: 'div',
value: '',
type: 'tag',
children: [],
attributes: []
}, '.a')
// Insert an element at the end
$.push({
tag: 'div',
value: '',
type: 'tag',
children: [],
attributes: []
})const txt = `<div class="a" id="a" a='a' b="2">a</div>`
const $ = new Parser(txt)
// Modify the attribute of the ".a" element'
$.modify('.a', (item) => {
item.attributes[2].value = "a2"
return item
})const txt = `<div class="a" id="a" a='a' b="2"><div class="b"></div></div>`
const $ = new Parser(txt)
$.remove('.b')const txt = `<div class="a" id="a" a='a' b="2"><div class="b"></div></div>`
const $ = new Parser(txt)
$.transform()