Parse HTML String to Array

Question

I have an html string that contains multiple <p> tags. WIthin each <p> tag there is a word and its definition.

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

My goal is to convert this html string into an array of objects that looks like below:

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

I am doing it as follows:

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

As you can see the comment in the above code, that is where I'm stuck. Any help is appreciated.

Please create and share a fiddle which can describe what you tried to do — Varit J Patel
– Varit J Patel, Commented Dec 21, 2018 at 10:32
How about this link stackoverflow.com/questions/13272406/…? — soorapadman
– soorapadman, Commented Dec 21, 2018 at 10:33
Can you change the HTML to put a tag around the definition, like <span class="definition">Definition of word 1</span>? — Barmar
– Barmar, Commented Dec 21, 2018 at 10:38

Barmar · Accepted Answer · 2018-12-21 10:42:39Z

3

Use textContent to get the text out of an element. The word is in the strong child element, the definition is the rest of the text.

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

answered Dec 21, 2018 at 10:42

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

holydragon · Accepted Answer · 2018-12-21 10:41:31Z

0

A bit adhoc but works.

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);

answered Dec 21, 2018 at 10:41

holydragon

6,7687 gold badges48 silver badges76 bronze badges

1 Comment

Barmar Over a year ago

Going from a DOM parser to string function is backwards.

Rom · Accepted Answer · 2018-12-21 10:56:25Z

0

You should fix:

DOMParser, not DomParser
pTags cannot use .forEach(), please use for loop

My solution for your problem:

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);

answered Dec 21, 2018 at 10:56

Rom

1,84815 silver badges28 bronze badges

Collectives™ on Stack Overflow

Parse HTML String to Array

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related