如何使用 XPath 将列表标记作为对象数组获取？

Question

I am trying to extract the ordered list and return an array of list tags & content inside. I have already tried these paths,

1. //li[div/@class="business-info"]
2. //li[div[@class="business-info"]]
3. //li[descendant::div[@class="business-info"]]
4. //li[div[@class="business-info"]/h2/a]

Is this the right approach or should I go with RegExp ? I am sharing my code to have a drill down.

Code

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);

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>
                &nbsp;<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>
                &nbsp;<span class="postcode" itemprop="postalCode">800826</span>
            </div>
        </div>
    </li>
</ol>

Expected Output: Array of Objects

const businessInfo = [
    {
        name: 'Company Ltd',
        phone: '0123456789',
        address: '21 Largo Road',
        locality: 'Focus',
        postal: 'KY168NH'
    },
    {
        name: 'Company Ltd1',
        phone: '0123456789',
        address: 'ECR Road',
        locality: 'St Andrews',
        postal: '800826'
    },
];

These are the sources I took for reference

1. https://developer.mozilla.org/en-US/docs/Web/API/XPathResult/snapshotItem
2. https://developer.mozilla.org/en-US/docs/Web/API/XPathResult/iterateNext
3. Get XPath of XML Tag

Answer 1

Look's like there is no need of XPath for my case I solved it by finding an innerText for each property with the help of selector. And then I composed an array of objects with these properties. Now the output will be what I actually expected.

const businessInfo = [];
const elements = document.querySelectorAll('ol > li > div.business-info');
elements.forEach((element) => {
    const companyInfo = {};
    try {
        businessInfo.name = element.querySelector('h2 > a').innerText;
        businessInfo.phone = element.querySelector('a > span.phone').innerText;
        businessInfo.address = element.querySelector('div > span.address-main > span:nth-child(1)').innerText;
        businessInfo.locality = element.querySelector('div > span.address-main > span:nth-child(2)').innerText;
        businessInfo.postalCode = element.querySelector('div > span.postcode').innerText;
    } catch (exception) {

    }
    data.push(businessInfo);
});
console.log(businessInfo);