Extract JSON Objects from HTML text file

Question

I have objects I'm trying to extract from a HTML file.

<h1> heading</h1>
<p> dsfhklsd sdlfjklsdj ljsdkflj</p>
{"data" : {"here" : "test"} }
<h2> heading</h2>
<p> dsfhklsd sdlfjklsdj ljsdkflj</p>
<p> dsfhklsd sdlfjklsdj ljsdkflj</p>
{"data2" : {"here" : "test"} }

How would I go about extracting the Objects so I can then parse them with JSON.parse() and use them in my JS code?

Essentially stripping anything that is not an object from the text / html file.

{"data" : {"here" : "test"} }
{"data2" : {"here" : "test"} }

First question is what source would mix json as text nodes with html like that? Would make more sense if it was mixed into data attributes or <code> or <pre> tags but not the way it is shown — charlietfl
– charlietfl, Commented Jul 16, 2019 at 15:13

epascarello · Accepted Answer · 2019-07-16 15:19:10Z

4

You can loop over the nodes and select the text nodes.

var objs = Array.from(document.body.childNodes) // select all the nodes
  .filter( // pick out just the lines we want
    node => 
      node.nodeType === Node.TEXT_NODE &&  // text node
      node.nodeValue.trim().length  // get rid of line feeds
  ).map(node =>
    JSON.parse(node.nodeValue.trim())) // convert to object

console.log(objs)

<h1> heading</h1>
<p> dsfhklsd sdlfjklsdj ljsdkflj</p>
{"data" : {"here" : "test"} }
<h2> heading</h2>
<p> dsfhklsd sdlfjklsdj ljsdkflj</p>
<p> dsfhklsd sdlfjklsdj ljsdkflj</p>
{"data2" : {"here" : "test"} }

answered Jul 16, 2019 at 15:19

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

1 Comment

Steven Over a year ago

Thank you so much!

Xion Dark · Accepted Answer · 2019-07-16 15:22:08Z

1

Assuming that your source is being processed by JavaScript as a string, I would use a Regex delete all the html elements (assuming that the JSON you want isn't wrapped in an html element, like in your example) or parse everything between the curly brackets.

answered Jul 16, 2019 at 15:22

Xion Dark

3,4342 gold badges18 silver badges23 bronze badges

Collectives™ on Stack Overflow

Extract JSON Objects from HTML text file

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related