How to parse content within <script> with JavaScript?

Question

For example in a webpage I have somewhere:

<script id="ajaxify-data" type="application/json">
{"key1":123,"key2":333}
</script>

Can I use javascript to parse it? (specifically, the ajaxify-data)

jQuery $("#ajaxify-data") just doesn't work here..

Edit: The website that I wanted to crawl actually is more complex than the simple example given above...

https://discuss.leetcode.com/unread looks like the web source, although containing ajaxify-data tag, it actually renders the data in ajax result instead of storing it in the actual ajax tag above.

This is what I get in the console:

> document.getElementById('ajaxify-data')
null

The webpage screenshot:

Are you ajaxing the source of the site? So that you are dealing with a string of HTML content? — KevBot
– KevBot, Commented Jul 4, 2016 at 1:19

KevBot · Accepted Answer · 2016-07-03 19:24:21Z

6

Just JSON parse the innerHTML of the script tag.

Plain JavaScript:

var json = JSON.parse(
  document.getElementById('ajaxify-data').innerHTML
);

console.log(json);
console.log(json.key1);

<script id="ajaxify-data" type="application/json">
  { "key1": 123, "key2": 333 }
</script>

Or with jQuery:

var json = JSON.parse($('#ajaxify-data').html())

console.log(json);
console.log(json.key1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="ajaxify-data" type="application/json">
  { "key1": 123, "key2": 333 }
</script>

answered Jul 3, 2016 at 19:24

KevBot

19k5 gold badges54 silver badges71 bronze badges

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

3 Comments

Sean L Over a year ago

Thanks, very complete! Do you have any idea about parsing <discuss.leetcode.com/unread> in specific? There's a ajaxify-data in <view-source:discuss.leetcode.com/unread> but vanilla / jquery JS cannot get the tag

KevBot Over a year ago

You might need to include a screenshot in order for me to understand what you are looking for specifically.

Sean L Over a year ago

added a screenshot; please check in the question! Thanks!

Oleksandr · Accepted Answer · 2016-07-03 19:39:09Z

2

    $('#ajaxify-data').html()
    $('#ajaxify-data').text()

works for me)

answered Jul 3, 2016 at 19:39

Oleksandr

5,7284 gold badges42 silver badges73 bronze badges

3 Comments

Sean L Over a year ago

Thanks, very complete! Do you have any idea about parsing <discuss.leetcode.com/unread> in specific? There's a ajaxify-data in <view-source:discuss.leetcode.com/unread> but vanilla / jquery JS cannot get the tag

Oleksandr Over a year ago

@SeanLao It is not possible to get <script> tag that is outside of document, according to specification. As a workaround I would send additional ajax request to the same server and get all code with html $.ajax({ url: 'discuss.leetcode.com/unread', success: function(data){console.log(data)} }); and then you will have to parse to distinguish html and script

Oleksandr Over a year ago

Write if you have questions

Oriol · Accepted Answer · 2016-07-03 20:05:31Z

0

There are multiple ways to get the contents of an inline script element:

textContent: returns the text content of a Node
innerHTML: returns the HTML content of an Element
text: returns the text content of a HTMLScriptElement

Then, if it contains JSON, you can parse it with JSON.parse.

answered Jul 3, 2016 at 20:05

Oriol

291k71 gold badges459 silver badges535 bronze badges

Collectives™ on Stack Overflow

How to parse content within <script> with JavaScript?

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related