javascript - 将文本列表转换为 JSON 对象（javascript 或 jquery）

Question

是否可以使用 Javascript 或 jQuery 将此列表转换为 JSON（见下文）？

<div class="w-dyn-items">
<div class="w-dyn-item">
    <div class="select-item-country">England</div>
</div>
<div role="listitem" class="w-dyn-item">
    <div class="select-item-country">N. Ireland</div>
</div>

["England","N. Ireland"]

我使用了各种 javascript 方法（拆分、数组等）将此文本转换为 json 数组，但我正在努力让它工作。

需要注意的一些事项：

• 上面的 HTML 数据存在于页面上，但它是隐藏的。此信息是通过 CMS 提取的（因此它是动态数据）
• 我需要将此列表转换为 JSON 数组，以便我可以创建级联选择/选项列表（我目前使用 Webflow 进行开发）。

感谢您对此的任何帮助！

标签： javascriptjson

Answer 1

按类抓取元素，map然后返回它们的文本内容。

注意：[...items]将返回的类数组静态节点列表从querySelectorAll结果转换为适当的数组，以便map可以工作。

const items = document.querySelectorAll('.select-item-country');
const values = [...items].map(item => item.textContent);
console.log(values);

// If you then need to convert it to JSON
const json = JSON.stringify(values);
console.log(json);

<div class="w-dyn-items">
  <div class="w-dyn-item">
    <div class="select-item-country">England</div>
  </div>
  <div role="listitem" class="w-dyn-item">
    <div class="select-item-country">N. Ireland</div>
  </div>
</div>

附加文件

• 传播语法