如何通过UserScript提取HTML中data-original-title值并输出到控制台

问题背景 #

需要提取页面表格条目中的data-original-title属性值，按指定HTML格式输出到控制台，但现有脚本仅在鼠标悬停后才返回值，无法正常提取。

目标HTML结构示例 #

<td class="sorting_1">Lorem Ipsum<br><span class="label label-warning tooltip-class" title="ABC">ABC</span> <span class="label label-theme" data-toggle="tooltip" title="" data-original-title="Source: http://ThisIsTheLinkNeeded.com">S</span> </td>

<td class="sorting_1">Dolar Emet<br><span class="label label-warning tooltip-class" title="ABC">ABC</span> <span class="label label-theme" data-toggle="tooltip" title="" data-original-title="Source: http://ThisIsThe2ndLinkNeeded.com">S</span> </td>

期望控制台输出格式 #

<p>Lorem Ipsum</p>
<p><a href="http://ThisIsTheLinkNeeded.com" rel="nofollow noreferrer">http://ThisIsTheLinkNeeded.com</a></p>
<p>Dolar Emet</p>
<p><a href="http://ThisIsThe2ndLinkNeeded.com" rel="nofollow noreferrer">http://ThisIsThe2ndLinkNeeded.com</a></p>

现有脚本问题 #

现有脚本直接查询目标元素，但页面可能动态加载内容，或tooltip插件（如Bootstrap Tooltip）仅在鼠标悬停时才初始化data-original-title属性，导致脚本执行时无法获取有效值。

// ==UserScript==
// @name     Parse Source Links Test
// @description hello
// @version 0.1
// @match    https://example.url/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant    GM_addStyle
// @grant    GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.
/* global $ */

let labels = document.querySelectorAll(".label.label-theme");
for (let label of labels) {
    console.log(label.dataset.originalTitle)
}

修正方案 #

完整可运行脚本 #

// ==UserScript==
// @name     Parse Source Links Test
// @description Extract and format source links from table
// @version 0.2
// @match    https://example.url/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant    GM_addStyle
// @grant    GM.getValue
// ==/UserScript==
/* global $ */

// 监听DOM变化，确保目标元素加载完成
function waitForElement(selector, callback) {
    if (document.querySelector(selector)) {
        callback();
        return;
    }
    const observer = new MutationObserver((mutations) => {
        if (document.querySelector(selector)) {
            observer.disconnect();
            callback();
        }
    });
    observer.observe(document.body, { childList: true, subtree: true });
}

// 执行提取与格式化逻辑
waitForElement('.sorting_1 .label.label-theme', () => {
    const rows = document.querySelectorAll('.sorting_1');
    rows.forEach(row => {
        // 提取标题文本（去除<br>及后续元素的内容）
        const title = row.firstChild.textContent.trim();
        // 获取目标span元素
        const sourceSpan = row.querySelector('.label.label-theme');
        
        if (sourceSpan) {
            // 直接读取原生属性，避免dataset兼容性问题
            const originalTitle = sourceSpan.getAttribute('data-original-title');
            if (originalTitle) {
                // 匹配并提取链接部分
                const linkMatch = originalTitle.match(/Source: (https?:\/\/\S+)/);
                if (linkMatch && linkMatch[1]) {
                    const url = linkMatch[1];
                    // 按期望格式输出到控制台
                    console.log(`<p>${title}</p>`);
                    console.log(`<p><a href="${url}" rel="nofollow noreferrer">${url}</a></p>`);
                }
            }
        }
    });
});

关键改进点 #

1. DOM监听机制：用MutationObserver等待目标元素加载完成，适配动态渲染的页面，避免脚本执行过早导致元素未就绪。
2. 原生属性读取：用getAttribute('data-original-title')替代dataset.originalTitle，规避部分tooltip插件修改DOM属性导致的读取失败问题。
3. 内容格式化：从属性值中提取链接，并严格按照期望的HTML结构输出。

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