1

ある文字を「n」と呼びましょう、別の色、たとえば黄色に変更したいと思います。これをすべてのページで、すべてのフォントとサイズで実行したいと考えています。

Greasemonkey 用のこのスクリプトを見つけました。これを変更して、やりたいことを実行できると思います。

文字「n」を に置き換えてみましたが"<p style="color:#FFB90F">n</p>"、役に立ちませんでした。CSS として評価されることなく、ページに挿入されるだけです。

これどうやってするの？文字と色のリストを指定する機能が欲しいです。

4

3 に答える 3

2

これは一般的な問題であり、.innerHTMLまたはを使用する回答に注意してください.html()。これらは、ページの HTML (タグの一部を無効な文字列に置き換える) や、ページの機能に必要な孤立したイベント ハンドラーを破壊します。

堅牢なソリューションでは、DOM 手法を使用してテキスト ノードのみを変更します。

次の完全なスクリプトは、標準的なwrapTextWithElement()関数を使用しています。この 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);
                }
            }
        } );
    };
}
于 2013-01-06T01:32:43.597 に答える
0

私はそれがあなたの問題ではないことを知っていますが、多分それはあなたを助けるでしょうhttp://letteringjs.com/。クラスにはすべての文字がありますspan。

于 2013-01-05T13:48:27.570 に答える
0

jQuery を使用して、次のようなことを試すことができます。

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

これは、任意の p タグで文字 "n" を検索するだけなので、ニーズに合わせて調整する必要があります。

#F00色redを16進数で表す

于 2013-01-05T15:25:29.307 に答える