如何使用JavaScript解析<script>标签中的内容？

Question

例如，在网页中我有这样一段内容：

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

我能用JavaScript来解析它吗？（具体来说，是ajaxify-data）

jQuery的$("#ajaxify-data")在这里不起作用。

编辑：我想爬取的网站实际上比上面给出的简单示例更复杂...

https://discuss.leetcode.com/unread看起来像是网页源代码，尽管包含ajaxify-data标签，但它实际上会将数据呈现在ajax结果中，而不是存储在上面的实际ajax标签中。

这是我在控制台中得到的：

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

网页截图：

- Sean L

---

似乎对我来说运行良好 -> https://jsfiddle.net/yqLt7rv6/ - adeneo

你是否正在使用Ajax请求网站源代码？因此，您正在处理HTML内容字符串吗？ - KevBot

你有机会尝试获取脚本吗？ - Alexandr

Answer 1

只需JSON解析脚本标记的innerHTML即可。

纯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>

---

或者使用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>

- KevBot

---

谢谢，非常详尽！你有关于如何解析https://discuss.leetcode.com/unread的具体方法吗？在view-source:https://discuss.leetcode.com/unread中有一个ajaxify-data，但是纯净的/ jQuery JS无法获取该标签。 - Sean L

你可能需要包含一张截图，以便我能够更明确地了解你所寻找的内容。 - KevBot

已添加屏幕截图，请在问题中查看！谢谢！ - Sean L

Answer 2

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

适合我（works for me)。

- Alexandr

---

谢谢，非常完整！你有没有关于特定解析https://discuss.leetcode.com/unread的想法？在view-source:https://discuss.leetcode.com/unread中有一个ajaxify-data，但是纯JS / jQuery无法获取标记。 - Sean L

@SeanLao 根据规范，无法获取位于文档之外的<script>标签。作为解决方法，我建议向同一服务器发送额外的ajax请求，并使用以下代码获取所有带有html的代码：$.ajax({url: 'https://discuss.leetcode.com/unread',success: function(data){console.log(data)}}); 然后您需要解析以区分html和script。 - Alexandr

如果您有问题，请写下来。 - Alexandr

Answer 3

有多种方法可以获取内联 script 元素的内容：

• textContent：返回节点的文本内容
• innerHTML：返回元素的 HTML 内容
• text：返回 HTMLScriptElement 的文本内容

如果它包含 JSON，则可以使用 JSON.parse 解析它。

- Oriol