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.
asked Dec 21, 2018 at 10:27
asanas
4,29015 gold badges52 silver badges85 bronze badges
3 Answers 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 badges555 silver badges669 bronze badges
Sign up to request clarification or add additional context in comments.
Comments
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,7787 gold badges49 silver badges77 bronze badges
1 Comment
Barmar
Going from a DOM parser to string function is backwards.
You should fix:
DOMParser, notDomParserpTagscannot use.forEach(), please useforloop
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);Comments
lang-js
<span class="definition">Definition of word 1</span>?