如何在JavaScript中提取HTML源码JSON？Greasemonkey插件开发疑问

当然可以实现！你要提取的是嵌在application/ld+json类型script标签里的JSON数据，虽然它不显示在页面上，但浏览器依然能访问到这个脚本的内容，用JavaScript完全可以搞定。下面是具体的实现步骤和代码：

核心思路 #

• 找到目标script标签：通过它的type属性精准定位
• 读取标签内的JSON字符串并解析成JavaScript对象
• 从解析后的对象里提取你需要的value值

完整的Greasemonkey脚本示例 #

// ==UserScript==
// @name         Extract Hidden JSON Value
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Extract 'value' from application/ld+json script tag
// @author       You
// @match        *://your-target-website.com/*  // 替换成你要作用的网站域名
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 1. 定位到目标script标签
    const ldJsonScript = document.querySelector('script[type="application/ld+json"]');
    if (!ldJsonScript) {
        console.log("找不到目标script标签");
        return;
    }

    try {
        // 2. 解析JSON内容
        const jsonData = JSON.parse(ldJsonScript.textContent);
        // 3. 提取value值（注意这里是数组，所以取第一个元素）
        const targetValue = jsonData[0]?.value;

        if (targetValue) {
            console.log("提取到的value值：", targetValue);
            // 这里写你的后续逻辑处理，比如使用targetValue做操作
            // 示例：alert(`提取到的值是：${targetValue}`);
        } else {
            console.log("JSON数据中没有找到'value'字段");
        }
    } catch (error) {
        console.log("解析JSON失败：", error);
    }
})();

关键细节说明 #

• 用document.querySelector通过type属性定位标签，比遍历所有script标签更高效
• 加入了try-catch块处理JSON解析失败的情况（比如内容格式错误）
• 使用可选链操作符?.避免当数组第一个元素不存在时抛出错误，让代码更健壮
• 如果你确定目标JSON不是数组而是单个对象，直接把jsonData[0]?.value改成jsonData.value就行

这样就能顺利把PEAR提取到targetValue变量里，然后你就可以在这个基础上写后续的逻辑啦！

内容的提问来源于stack exchange，提问作者NickP