javascript - 将 HTML 字符串解析为数组

Question

我有一个包含多个 <p> 的 html 字符串标签。在每个 <p> 中标记有一个词及其定义。

let data = "<p><strong>Word 1:</strong> Definition of word 1</p><p><strong>Word 2:</strong> Definition of word 2</p>"

我的目标是将此 html 字符串转换为如下所示的对象数组:

[
 {"word": "Word 1", "definition": "Definition of word 1"},
 {"word": "Word 2", "definition": "Definition of word 2"}
]

我是这样做的:

var parser = new DOMParser();
  var parsedHtml    = parser.parseFromString(data, "text/html");
  let pTags = parsedHtml.getElementsByTagName("p");
  let vocab = []
  pTags.forEach(function(item){
    // This is where I need help to split and convert item into object
    vocab.push(item.innerHTML)
  });

正如您在上面代码中看到的注释，这就是我卡住的地方。感谢您的帮助。

Answer 1

使用 textContent 从元素中获取文本。单词在 strong 子元素中，定义是文本的其余部分。

var parser = new DomParser();
  var parsedHtml    = parser.parseFromString(data, "text/html");
  let pTags = parsedHtml.getElementsByTagName("p");
  let vocab = []
  pTags.forEach(function(item){
    let word = item.getElementsByTagName("strong")[0].textContent.trim();
    let allText = item.textContent;
    let definition = allText.replace(word, "").trim();
    vocab.push({word: word, definition: definition})
  });