如何更改网页上一个特定字母的颜色（换行）？答案

【问题标题】：How to change the color of one specific letter on a web page (wrap the text)?如何更改网页上一个特定字母的颜色（换行）？
【发布时间】：2013-01-05 13:38:19
【问题描述】：

我想改变一个字母，我们称之为“n”，换成不同的颜色，比如说黄色。我希望在所有页面上以所有字体和大小完成此操作。

我为 Greasemonkey 找到了this script，我认为可以对其进行修改以做我想做的事情。

我尝试将字母“n”替换为"n"，但无济于事。它只是被插入到页面中而不被评估为 CSS。

我该怎么做？我希望能够指定字母和颜色列表。

【问题讨论】：

标签： javascript html css greasemonkey word-wrap

【解决方案1】：

这是一个常见的问题，请注意使用.innerHTML 或.html() 的答案。这些将破坏页面的 HTML（用无效字符串替换部分标记）和/或页面功能可能需要的孤立事件处理程序。

稳健的解决方案将使用 DOM 技术仅修改文本节点。

以下完整脚本使用标准的wrapTextWithElement() 函数。
您可以在 this jsFiddle 看到正在运行的代码。

// ==UserScript==
// @name     Wrapping/Coloring letters in an HTML page
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==

//-- Use CSS, *not* inline styles to color/style things
GM_addStyle ( "                                 \
    span.coloredLetter {                        \
        background: yellow;                     \
    }                                           \
" );

var letI_Wrapper    = new wrapTextWithElement ('i', '<span class="coloredLetter">');
letI_Wrapper.wrap (document.body); // Here we wrap everything.

function wrapTextWithElement (targText, elemToWrapWith, bCaseSensitive) {
    var self            = this;
    var bCaseSensitive  = bCaseSensitive || false;
    self.targRegEx      = new RegExp ("(" + targText + ")", bCaseSensitive ? "" : "i");
    self.elemToWrapWith = elemToWrapWith;

    self.wrap = function (node) {
        $(node).contents ().each ( function () {
            if (this.nodeType === Node.ELEMENT_NODE) {
                self.wrap (this);
            }
            else if (this.nodeType === Node.TEXT_NODE) {
                var ndText  = this.nodeValue;

                if (self.targRegEx.test (ndText) ) {
                    var replaceNodes = $.map (
                        ndText.split (self.targRegEx),
                        function (phrase) {
                            if (self.targRegEx.test (phrase) ) {
                                /*  The $(HTML, props) form does not work if the HTML
                                    has attributes
                                var wrapped = $(self.elemToWrapWith, {text: phrase} );
                                */
                                var wrapped = $(self.elemToWrapWith).text (phrase);

                                return wrapped.get ();
                            }
                            else {
                                if (phrase == "")
                                    return null;
                                else
                                    return document.createTextNode (phrase)
                            }
                        }
                    );
                    $(this).replaceWith (replaceNodes);
                }
            }
        } );
    };
}

【讨论】：

【解决方案2】：

我知道这不完全是你的问题，但也许它可以帮助你http://letteringjs.com/。每个字母都有一个自己的span 有一个类。

【讨论】：

【解决方案3】：

你可以使用 jQuery 并尝试这样的事情：

$('p:contains(n)').each(function() {
   $(this).html(
      $(this).html().replace('n', '<span style="color:#F00;">n</span>')
   );
});

这只会在任何 p 标签中找到字母“n”，因此您需要进行调整以适应您的需求。

#F00 表示颜色为十六进制的red

【讨论】：

这很糟糕。它将破坏页面： 变为 <span>；用于按钮、链接等的 javascript 将被丢弃；等