从 HTML 无序列表创建数组

Question

我有一个无序列表，我想将其中的每个元素放入一个数组中。

<div id='main'>
 <ul>
  <li>First</li>
  <li>Second</li>
 </ul>
</div>

我需要像这样将它转移到 JSON object ：

"type": "list",
"data": ["* First", "* Second"]

现在，我有 function 以字符串形式返回列表中的所有数据：

let newObj = document.createElement("div");
newObj.innerHTML = document.getElementsByTagName('UL')[0].innerHTML;
[...newObj.querySelectorAll("li")].forEach(ele => ele.parentNode.replaceChild(document.createTextNode("* "+ele.textContent)),ele);
return newObj

Answer 1

你可以 select 所有的li 。 然后 map 它获取 textContent 并添加*作为前缀

 const items = document.querySelectorAll('#main li'); const result = { type: 'list', data: Array.from(items).map(el => `* ${el.textContent}`), } console.log(result)

 <div id="main"> <ul> <li>First</li> <li>Second</li> </ul> </div>

Answer 2

您可以使用 jquery：

let $li = $('#main').find('li') //returns a collection
let array = $.map($li, e => '* ' + e.textContent)

转换为 JSON：

let toJson = JSON.stringify(array)