1.0.2 • Published 2 years ago
parse5-find-child v1.0.2
parse5-find-child
Description
A tool to find child elements from document parsed by parse5 through specified path, either accurate or fuzzy.
Installation
npm i parse5-find-child -SInstructions
Suppose the html document you want to search is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>parse5-find-child test example</title>
</head>
<body>
<img class="top-image" src="boat.gif" alt="Big Boat">
<form class="simple-form" id="profile" action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
<div class="list-wrapper" id="drink">
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
</div>
<div class="list-wrapper2" id="fruit">
<ul>
<li>Banana</li>
<li>Apple</li>
</ul>
</div>
<div class="table-wrapper">
<table id="contact" border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</div>
</body>
</html>Find nodes by specifying paths, and use ; to separate multi-level paths.
Each layer path supports 4 search methods, and you can use multiple methods in combination, separated by ,:
- element type, eg.
<div> - class attribute, eg.
.list-wrapper - id attribute, eg.
#fruit - wildcard:
*
You can specify an accurate path, eg. <body>;<form>;<fieldset>.
Or use the wildcard * for an fuzzy path, eg. .list-wrapper2;*;<li>.
Examples
import { parse } from 'parse5'
import findChild from 'parse5-find-child'
// html comes from the above example
const doc = parse(html)
// to find a node with id 'contact'
const theContactTable = findChild(doc, '#contact')
// to find a node with class attribute 'list-wrapper'
const theListWrapperDiv = findChild(doc, '.list-wrapper')
// to find all 'li' elements under the node with class attribute 'list-wrapper2'
const out = findChild(doc, '.list-wrapper2;*;<li>')