Tampermonkey 用图像替换文字

Question

Tampermonkey 中的这段代码将单词 "Goals" 替换为 "Goals"，但在其旁边添加了一个目标图像。我如何修改此语句，以便在它只是一个字母 "G" 而不是用 "Greenville"?

这样的词时替换字母 "G"

E：具体在这样的页面上： http://oua.ca/sports/mice/2016-17/teams/ryerson?view=lineup

所以 header G（进球）A（助攻）旁边有一个图标。

(function() {
    'use strict';
    document.body.innerHTML = document.body.innerHTML.replace(/Goals/g,'<img src="##" height="20"> GOALS');
})();

Answer 1

使用CSS修改外观。

优点是您可以在页面显示之前完成 (@run-at: document-start)，因此您的修改将立即显示。即使没有用户脚本，也可以使用 Stylish 来完成。

// ==UserScript==
// @name         oua logos in header
// @match        http://oua.ca/sports/*
// @run-at       document-start
// @grant        GM_addStyle
// ==/UserScript==

GM_addStyle(`
    th a[href*="?sort=g&"] {
        width: 16px;
        height: 16px;
        background: url(http://www.freeiconspng.com/uploads/letter-g-icon-png-20.png);
        display: inline-block;
        color: transparent!important;
        background-size: 16px;
        margin-left: -32px;
    }
    th a[href*="?sort=g&"]:after {
        content: "GOALS";
        color: white;
        margin-left: 8px;
    }
`);

使用 MutationObserver 在显示之前修改元素。

使用 setMutationHandler 包装器的示例：

// ==UserScript==
// @name         oua logos in header
// @match        http://oua.ca/sports/*
// @run-at       document-start
// @require      https://greasyfork.org/scripts/12228/code/setMutationHandler.js
// ==/UserScript==

iconizeHeader(document.querySelectorAll('th a'));
setMutationHandler(document, 'th a', iconizeHeader);

function iconizeHeader(elements) {
    for (var i = 0, e; (e = elements[i++]); ) {
        var newImage, newText;
        switch (e.textContent) {
            case 'g':
                newImage = 'http://..................';
                newText = 'GOALS';
                break;
            case 'pts':
                newImage = 'http://............';
                newText = 'POINTS';
                break;
            default:
                continue;
        }
        e.textContent = newText;
        e.insertAdjacentHTML('beforebegin',
                             '<img src="' + newImage + '" width=16 height=16>');
    }
}

Tampermonkey 用图像替换文字

Tampermonkey replacing words with images

tampermonkey

使用CSS修改外观。

使用 MutationObserver 在显示之前修改元素。