JavaScript 相当于 php DOMDocument 对象

Question

我在 PHP 中编写了一段代码，用于解析我通过 "wikipedia.org" 的 API 请求收到的数据。我使用 DOMDocument class 来解析数据并且它工作得很好。现在我想在 JavaScript 做同样的工作。 API 请求 returns （稍微清理后）这样的字符串：

$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>"

in JavaScript 并且我想获取每个 <li> 标签内的文本。我在网上搜索 class 到 JavaScript 中 PHP DOMDocument 的等价物，但令人惊讶的是我一无所获。任何想法如何在（最好是 Vanilla）JavaScript 中做到这一点类似于 PHP 代码？如果没有，知道如何在 JavaScript 中执行此操作（甚至可能使用正则表达式）吗？

Answer 1

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

仅供参考 我使用的是 ES20xx 语法。如果您不支持此功能，则需要转换为用户可以访问的语法。

这里我有一个表达式可以捕获开始 <ul> 或 <li> 和结束标记之间的任何内容。然后我使用换行符将字符串拆分成一个数组。我们需要从结果数组中过滤掉空元素，最后 return 最终数组中的所需项目。

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, '').split('\n');

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

        return element;
    });

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

Answer 2

使用DOMParser()

您移植的代码，与您的PHP非常相似：

let parser = new DOMParser()
let doc = parser.parseFromString(`<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<ul>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>`, "text/html")


let lis = doc.getElementsByTagName('li')
let items = []
for (let i = 0; i < lis.length; i++) items.push(lis[i].textContent)

console.log(items)

JavaScript 相当于 php DOMDocument 对象

JavaScript equivalent of php DOMDocument Object

html

javascript

php

regex

domdocument