代码之家 › 专栏 › 技术社区 › asanas

将HTML字符串解析为数组

javascript

asanas · 技术社区 · 6 年前

我有一个html字符串,其中包含多个 <p> 标签。在每个 <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)
  });

3 回复 | 直到 6 年前

Barmar 6 年前

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

holydragon 6 年前

有点临时,但有效。

const data = "<p><strong>Word 1:</strong> Definition of word 1</p><p><strong>Word 2:</strong> Definition of word 2</p>";
const parsedData = [
  {
    "word1": data.split('<strong>')[1].split('</strong>')[0].trim(),
    "definition": data.split('</strong>')[1].split('</p>')[0].trim()
  },
  {
    "word2": data.split('</p>')[1].split('<strong>')[1].split('</strong>')[0].trim(),
    "definition": data.split('</p>')[1].split('</strong>')[1].split('</p>')[0].trim()
  }
]
console.log(parsedData);

Ha. Huynh Rodrigo Oliveira 6 年前

DOMParser DomParser
pTags 不能使用 .forEach() ,请使用 for 环

我对您问题的解决方案:

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

var parser = new DOMParser();
var parsedHtml = parser.parseFromString(data, "text/html");
let pTags = parsedHtml.getElementsByTagName("p");
let vocab = [];
for (let p of pTags) {
  const word = p.getElementsByTagName('strong')[0].innerHTML.replace(':', '').trim();
  const definition = p.innerHTML.replace(/<strong>.*<\/strong>/, '').trim();
  vocab.push( { word, definition } )
}

console.log(vocab);