sprut-html-parser
v0.0.2-beta.6
Published
Простой html-парсер, средства обработки узлов и перевод узлов в строку
Downloads
8
Readme
> npm i sprut-html-parserSprut-html-parser
Простой html-парсер, средства обработки узлов и перевод узлов в строку.
Экспортируются parseHTML, stringifyHTMLNode и nodeTreeHandler для перебора узлов в дереве с возможностью выхода из обработки. nodeTreeHandler нужен для написания любых дополнительных инструментов для работы с деревом, например для функции выбора с помощью селектора.
Оглавление
Использование parseHTML:
Функция parseHTML получает на вход стркоу и, опционально, состояние парсинга, с помощью которого можно продолжить ранее прерванный парсинг. Возвращает дерево узлов и последнее состояние парсинга.
Контекст handler и find - это внутренний пустой объект, который можно предзаполнить в стартовом обработчике или закинуть с данными предыдущего состояния.
Функция parseHTML возвращает root с узлами html и своё состояние парсинга.
Ниже будет приведён код парсинга и перевода в строку обратно кода html:
import { parseHTML, stringifyHTMLNode } from 'sprut-html-parser';
const html = '<p attr="value" attr_2><a href="./link" />Some Text</p>';
const minify = (s) => s.replace(/\n/g, '').replace(/>\s{1,}/g, '>').replace(/\s{1,}</g, '<').replace(/\s+/g, ' ');
const { root } = parseHTML(html);
console.log(minify(stringifyHTMLNode({ node: root })));
// <p attr="value" attr_2><a href="./link" />Some Text</p>Использование nodeTreeHandler:
nodeTreeHandler перебирает каждый узел в дереве и углубляется в дочерние узлы. В любой момент обход можно остановить из обработчика узла. По мере обхода можно выполнять какие-либо действия с узлами. Это можно использовать например для поиска. Для примера напишу функцию поиска по тегу.
import { parseHTML, nodeTreeHandler } from 'sprut-html-parser';
import { AllNodes } from 'sprut-html-parser/types';
const html = '<p attr="value" attr_2><a href="./link" />Some Text</p>';
const { root } = parseHTML(html);
const getByTag = (tag: string, tree: AllNodes) => {
let result = null;
nodeTreeHandler(tree, (node, stop) => {
if (node.type === 'html' && node.tag === tag) {
result = node;
stop();
}
});
return result;
}
console.log(getByTag('a', root));
/*
<ref *1> {
tag: 'a',
children: [],
attributes: [
{
name: 'href',
value: './link',
parent: [Circular *1],
type: 'attribute'
}
],
parent: {
tag: 'p',
children: [ [Circular *1], [Object] ],
attributes: [ [Object], [Object] ],
parent: { type: 'root', root: true, children: [Array], parent: null },
type: 'html'
},
type: 'html',
isVoid: true
}
*/Тесты и результаты:
Перевод строки html в дерево и обратно в строку с удалением пробелов, проверка на эквивалентность:
Результат для строки html `<!DOCTYPE html>`: "<!DOCTYPE html>"
Время выполнения: 0мсРезультат для строки html `<p attr="value" attr_2><a href="./link" />Some Text</p>`: "<p attr="value" attr_2><a href="./link" />Some Text</p>"
Время выполнения: 0мсРезультат для строки html `<div><p>Some Text</p></div>`: "<div><p>Some Text</p></div>"
Время выполнения: 0мсРезультат для строки html `<!DOCTYPE html><div><p>Some Text</p></div>`: "<!DOCTYPE html><div><p>Some Text</p></div>"
Время выполнения: 0мсРезультат для строки html `<!DOCTYPE html><div><!-- Comment --></div>`: "<!DOCTYPE html><div><!-- Comment --></div>"
Время выполнения: 0мсРезультат для строки html `<style>
.selector {color: red;}
</style>
`: "<style>
.selector {color: red;}
</style>
"
Время выполнения: 1мс