JavaScript等同于php DOMDocument对象

Question

我用PHP编写了一个代码，用于解析由“ wikipedia.org”的API请求接收到的数据。我使用DOMDocument类来解析数据，并且工作得很好。现在，我想在JavaScript中执行相同的工作。 API请求返回（经过一点清理后）这样的字符串：

$htmlString = "<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<ul>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>"

请注意，这仅是示例。任何请求可能具有不同数量的列表，但是它始终是一系列无序列表。我需要在<li>标记内获取文本，并且以下PHP代码可以正常运行。

$DOM = new DOMDocument;
$DOM->loadHTML($htmlString);
$lis = $DOM->getElementsByTagName('li');
$items =[];
for ($i = 0; $i < $lis->length; $i++) $items[] = $lis[$i]->nodeValue;

然后我根据需要在$items变量中获得数组[Item 1，...，Item 5]。现在，我想在JavaScript中执行相同的工作。那是我有一个字符串

htmlString = "<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<ul>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>"

在JavaScript中，我想在每个<li>标签中获取文本。我在网络上搜索了JavaScript中PHP DOMDocument的等效类，但令人惊讶的是，我什么都没找到。有什么想法可以在JavaScript中做到这一点（甚至可以使用正则表达式）吗？

Answer 1

如果严格使用字符串，则要使用正则表达式。

[这里，我有一个表达式可以捕获在打开<ul>或<li>与结束标记之间的所有内容。然后，我使用换行符将字符串拆分为一个数组。我们需要从结果数组中过滤出空元素，并最终在最终数组中返回所需的项。

var htmlString = `<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<ul>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>`;

var lis = htmlString.replace(/<ul>|<li>(.*)<\/li>|<\/ul>/g, '$1').split('\n');

var items = lis
    .filter(item => {
        if (item && item !== null && item !== '') {
            return item;
        }
    })
    .map(item => {
        var element = item.replace(/\s/g, '');

        return element;
    });

console.log('items array.', items);