相当于 php DOMDocument 对象的 JavaScript

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 等效的类，但令人惊讶的是我什么也没找到。 有什么想法如何在（最好是 Vanilla）JavaScript 中类似于 PHP 代码来做到这一点？ 如果没有，知道如何在 JavaScript 中执行此操作（甚至可能使用正则表达式）吗？

Answer 1

使用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)

Answer 2

如果您严格使用字符串，则需要使用正则表达式。仅供参考&nbsp;我正在使用 ES20xx 语法。如果您不支持此功能，则需要转换为您的用户可以访问的语法。这里我有一个表达式，它捕获开始&nbsp;<ul>&nbsp;或&nbsp;<li>&nbsp;和结束标记之间的任何内容。然后我使用换行符将字符串拆分为数组。我们需要从结果数组中过滤掉空元素，最后在最终数组中返回所需的项目。var htmlString = `<ul>&nbsp; &nbsp; <li>Item 1</li>&nbsp; &nbsp; <li>Item 2</li></ul><ul>&nbsp; &nbsp; <li>Item 3</li>&nbsp; &nbsp; <li>Item 4</li>&nbsp; &nbsp; <li>Item 5</li></ul>`;var lis = htmlString.replace(/<ul>|<li>(.*)<\/li>|<\/ul>/g, '$1').split('\n');var items = lis&nbsp; &nbsp; .filter(item => {&nbsp; &nbsp; &nbsp; &nbsp; if (item && item !== null && item !== '') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return item;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp; &nbsp; .map(item => {&nbsp; &nbsp; &nbsp; &nbsp; var element = item.replace(/\s{2,}/g, '');&nbsp; &nbsp; &nbsp; &nbsp; return element;&nbsp; &nbsp; });console.log('items array.', items);