browser - 如何更改整个网络中单个字母的颜色？

Question

我正在进行一项实验，我们试图训练人们成为联觉者（他们对与数字或字母相关的颜色有额外的经验）。

我想知道是否有人对修改 Web 浏览器（例如 firefox）的最简单方法有一些建议，以便在他们访问的任何网页上始终以特定颜色显示 10 个字母 AJ？

非常感激

Answer 1

有很多方法可以做到这一点（跨浏览器）：

例如，您可以在样式表中定义一个 -element 以具有不同的颜色。加载文档时，您可以通过 JavaScript/jQuery 检查整个文档（但仅检查标签的内容，例如 ）以查找您指定的字母，并在它们周围添加 -tag fe。

不是最好的解决方案，而是一种方法。

Answer 2

看看Greasemonkey，这是一个 FireFox 插件，旨在做这种事情。http://userscripts.org/上有很多预制脚本，其中一些看起来可以帮助您弄清楚如何编写自己的脚本以重新着色单个字母。

Answer 3

这里只是一个潜在解决方案的 beta 版本的蓝图初步形式的抽象粗略草案：使用javascript:书签中的链接前缀，如下所示。

1. 在书签工具栏中创建一个新条目
2. 在 URL 输入中，复制/粘贴以下行：javascript:var html = document.body.innerHTML; html = html.replace(/([a-j])/ig, '<span style="color: red;">$1</span>'); while(html.match(/(<[^>]*)<[^>]+>([^<]+)<\/[^>]+>([^>]*>)/g) != null) {html = html.replace(/(<[^>]*)<[^>]+>([^<]+)<\/[^>]+>([^>]*>)/g, '$1$2$3');} document.body.innerHTML = html;
3. 为您的书签命名（例如“AJ to red”）并保存
4. 您现在可以访问任何网站并单击该书签，这会将 a 和 j 之间的所有字母变为红色

以更消化的方式：

// get the content of the body
var html = document.body.innerHTML;
// surround any letter between a and j by a <span></span>
html = html.replace(/([a-j])/ig, '<span style="color: red;">$1</span>');
// but it also replaces a-j letters within html tags
while(html.match(/(<[^>]*)<[^>]+>([^<]+)<\/[^>]+>([^>]*>)/g) != null) {
    // so if there are html tags within other html tags, delete the created <span></span>
    html = html.replace(/(<[^>]*)<[^>]+>([^<]+)<\/[^>]+>([^>]*>)/g, '$1$2$3');
}
// and replace the innerHTML of the body
document.body.innerHTML = html;

这真的不是最终的解决方案，但是，是的，也许你可以努力改进结果。

PS：不要尝试使用IE ...