0

Javascriptで作成されたすべてのHTML構造を持つWebページがあります。例：

<script language="JavaScript" type="text/javascript">
//<![CDATA[
function abcd()
{
document.writeln('<div id="abc">');
document.writeln('<div class="Wrapper">');
document.writeln('Test');
...
}
</script>

私がやりたいのは、単語のすべてのインスタンスをに置き換えることTestです<b>Test</b>が、この方法で要素/HTMLを取得する方法がわかりません。

4

1 に答える 1

1

をラップTestすると、問題のHTMLがjavascriptによって追加されます。その場合、3つの基本的なアプローチがあります。

  1. 表示されたターゲット単語をラップするだけです。これは最も堅牢なアプローチです。詳細については、以下を参照してください。

  2. 多くの場合、問題のあるjavascript関数を後で書き直すことができます。例えば：

    // ==UserScript==
// @name     YOUR_SCRIPT_NAME
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// ==/UserScript==

function abcd () {
    document.writeln('<div id="abc">');
    document.writeln('<div class="Wrapper">');
    document.writeln('<b>Test</b>');
    ...
}

var D                   = document;
var scriptNode          = D.createElement ('script');
scriptNode.type         = "text/javascript";
scriptNode.textContent  = abcd;

var targ    = D.getElementsByTagName('head')[0] || D.body || D.documentElement;
targ.appendChild (scriptNode);


    abcd ()うまくいけば、実行される前に、 の邪悪なバージョンを置き換えます。

  3. ロード後、実行前にそのノードをインターセプトしようとすることができ<script>ます（スクリプトが実行されたら、ソースを変更しても効果はありません）。

    これはFirefoxで可能です。それを行うGreasemonkeyコードについては、この回答を参照してください。ただし、この場合はそのアプローチをお勧めしません。

CDATAは、これらのアプローチのいずれの要因でもありません。

表示されるターゲットテキストを折り返す：

  1. waitForKeyElements（）ユーティリティを使用して、対象のノードが表示されたときにそれをキャッチします。ページのJavaScriptを分析したり、何かを壊す可能性のある変更について心配したりする必要はありません。

  2. HTMLを壊したり、イベントリスナーを破棄したりせずに、一般的なDOMアプローチを使用してターゲットテキストをラップします。この場合、それはwrapTextWithElementオブジェクトです。

  3. jQueryを使用すると、すべてがより簡単で明確になります。

これが完全なスクリプトです。このデモページに対してテストすることもできます。

// ==UserScript==
// @name     YOUR_SCRIPT_NAME
// @include  http://fiddle.jshell.net/gH4nV/*
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change introduced
    in GM 1.0.   It restores the sandbox.
*/

waitForKeyElements ("div.Wrapper", emboldenTheWordTest);

function emboldenTheWordTest (jNode) {
    var testWrapper = new wrapTextWithElement ('Test', '<b>');
    testWrapper.wrap (jNode);
}

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) ) {
                                var wrapped = $(self.elemToWrapWith, {text: phrase} );

                                return wrapped.get ();
                            }
                            else {
                                if (phrase == "")
                                    return null;
                                else
                                    return document.createTextNode (phrase)
                            }
                        }
                    );
                    $(this).replaceWith (replaceNodes);
                }
            }
        } );
    };
}
于 2012-11-14T12:03:25.750 に答える