0

有一个网页具有使用 Javascript 制作的所有 HTML 结构。例子:

<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

您想要 wrap Test,并且有问题的 HTML 是由 javascript 添加的。如果是这样,那么有三种基本方法:

  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. 使用常见的 DOM 方法来包装目标文本,而不会破坏 HTML 或丢弃事件侦听器。在这种情况下,它是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 回答