JSFiddle - React, Tailwind, and code Playground
by RichardAD
HTML
<ol class="results">
<li class="result clearfix">
<div class="business-info">
<h2 itemprop="name">
<a class="name" href="#">Company Ltd</a>
</h2>
<a href="#" class="phone disabled"><span class="tel-icon sprite"></span><span itemprop="telephone" class="phone">0123456789</span></a>
<div class="address">
<span class="address-main"><span itemprop="streetAddress">21 Largo Road</span>, <span itemprop="addressLocality">Focus</span>, </span>
<span class="postcode" itemprop="postalCode">KY168NH</span>
</div>
</div>
</li>
<li class="result clearfix">
<div class="business-info">
<h2 itemprop="name">
<a class="name" href="#">Shipment Ltd</a>
</h2>
<a href="#" class="phone disabled"><span class="tel-icon sprite"></span><span itemprop="telephone" class="phone">0123456789</span></a>
<div class="address">
<span class="address-main"><span itemprop="streetAddress">ECR Road</span>, <span itemprop="addressLocality">St Andrews</span>, </span>
<span class="postcode" itemprop="postalCode">800826</span>
</div>
</div>
</li>
</ol>
JavaScript
// https://stackoverflow.com/questions/60151632/how-to-get-list-tag-as-array-of-objects-using-xpath
const IGNORE = ['style', 'script'];
const NONWHITESPACE_RE = /\S/;
const result = document.evaluate(
'//*[child::text()]',
document,
null,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
null
);
const businessInfo = [];
for (let i = 0, j = result.snapshotLength; i < j; i++) {
const element = result.snapshotItem(i);
if (IGNORE.includes(element.tagName.toLowerCase())) {
continue;
}
const nodes = [...element.childNodes];
for (const node of nodes) {
if (node.nodeType !== document.TEXT_NODE) {
continue;
}
if (node.nodeValue.search(NONWHITESPACE_RE) === -1) {
continue;
}
businessInfo.push({
tag: element.tagName.toLowerCase(),
text: node.nodeValue.trim()
});
}
}
console.log(businessInfo);