Question

我有一个脚本，使用TreeWalker逐字翻译俄语论坛，但有一种div元素，我无法更改其文本，这是我的问题，我该如何改变？由于论坛需要注册，我将尝试提供下面的代码的每个细节。

我正在尝试更改文字的网页专用代码：

<div class="sp-wrap">
    <div class="sp-head folded clickable">Скриншоты</div> //once clicked unhide the div below to show images and by clicking it again hides.
    <div class="sp-body inited" title="" style="display: none;"> //hidden div
        <div class="clear"></div>
        <h3 class="sp-title">Скриншofы</h3>
        <span class="post-align" style="text-align: center;">
        <div class="clear"></div>
        <div class="sp-fold clickable">[свернуть]</div>
    </div>
</div>

我正在尝试更改类 sp-head 中的图像的Скриншоты，这是我点击显示图片的那个。

该类的CSS代码：

.sp-head {
    border-width: 0;
    color: #2a2a2a;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    line-height: 15px;
    margin-left: 6px;
    padding: 1px 14px 3px;
}

我的代码如下：

//... header
// @require     https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
// @grant       GM_addStyle
// ==/UserScript==

$('div.sp-wrap > div:first').each( function (){ //div:contains("Скрин") div.sp-head.folded.clickable

    var jThis = $(this);
    var jText = jThis.textContent;
    var jhtml = jThis.html();

    console.log(jText);
    console.log(jThis);
    //console.log(jhtml);

    jText = jText.replace(/Скрин(лист|шоты)/ig, "Images");

});

var textWalker   = document.createTreeWalker (
    document.body,
    NodeFilter.SHOW_TEXT,
    {   acceptNode: function (node) {
        // Skip whitespace-only nodes
        if (node.nodeValue.trim() )
            return NodeFilter.FILTER_ACCEPT;

        return NodeFilter.FILTER_SKIP;
    }
    },
    false
);

var textNode;

while (textNode  = textWalker.nextNode() ) {
    var oldText  = textNode.nodeValue;
    var newText  = oldText.replace (/Главная/ig, "Home");
    newText      = newText.replace (/Скрин(лист|шоты)/ig, "Images");
    newText      = newText.replace (/Последние поблагодарившие/ig, "Last Who Thank");
    //...
    //repeats word by word until ends at the line below     
    textNode.nodeValue = newText;
}

我尝试了什么

我已经尝试了一堆jQuery过滤器，可以获得那个div子，但它就像它不存在一样。

当我使用：

选择div本身时

$('div.sp-head.folded.clickable')

控制台结果为空白。

当我运行我在这里发布的代码时（在我的代码下面的标题下），结果是

分别为jText和jThis vars

最后当我尝试

时

$('div.sp-wrap div:contains("Скрин")').each( function (){ 

    var jThis = $(this);
    var jText = jThis.text();
    jThis.text("Images");

});

我得到的图像替换了真实的图像

当我尝试使用

时也失败了

$('div.sp-wrap div:contains("Скрин")').each( function (){ 

    var jThis = $(this);
    var jText = jThis.text();
    jThis.parent().text("Images");

});

导致销毁

由于它是替换其他文本的文本，我无法弄清楚为什么TreeWalker不会“看到”那种 div 文本。

已添加以澄清评论

所有span标签看起来都已关闭，即使图像上包含的标签也会关闭。

Answer 1

昨天我找到了解决方案，之前无法发布。换行内容为AJAXed，因此在脚本运行时，要选择的元素尚未就绪。为了解决这个问题，我使用了WaitForKeyElements()。在分析了最后一位感谢＆＃34;的人之后，我能够发现问题。列表，不敢相信我以前没见过。

解决方案：

//...header
// @require     https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant       GM_addStyle
// ==/UserScript==


waitForKeyElements ("div.sp-head.folded.clickable", translateDiv);


function translateDiv (jNode) {

    var jText  = jNode.text();
    var reg    = /Скрин(лист|шоты)/ig;

    if (reg.test (jText) ) {

        jNode.text( jText.replace(/Скрин(лист|шоты)/ig, "Images") );

    } else if (jText.indexOf("Последние поблагодарившие") != -1) {

        jNode.text("Last Who Thanks");

    }

}

Answer 2

It appears you can find the text inside the body, but not the collapsible title

What ever JavaScript is invoked to make the panel collapsible would be changing the markup so you would need to inspect the new markup in the F12 tools after the collapsible has been initialized. I cannot determine what framework you are using but JQuery.UI tends to change the DOM a ton.

Suggest you add a JSFiddle or Plunker.

Answer 3

据我所知，到目前为止，您正在尝试将 div 标记替换为俄语文本内容，例如'Скриншоты'到英文'Images'值，并且您正尝试使用jQuery和TreeWalker遍历，所以这里的代码分别适用于每一个：

使用jQuery替换文本内容：

$('div.sp-wrap > div:first').each( function (){ 

    var jThis = $(this);
    var jText = jThis.text();
    var jhtml = jThis.html();

    console.log(jText);
    console.log(jThis);   

    jText = jText.replace(/Скрин(лист|шоты)/ig, "Images");
   $(jThis).text(jText);

});

使用TreeWalker替换文本内容

var textWalker   = document.createTreeWalker (
    document.body,
    NodeFilter.SHOW_TEXT,
    {   acceptNode: function (node) {
        // Skip whitespace-only nodes
        if (node.nodeValue.trim() )
            return NodeFilter.FILTER_ACCEPT;

        return NodeFilter.FILTER_SKIP;
    }
    },
    false
);



while (textWalker.nextNode() ) {
    var textNode = textWalker.currentNode;    
    var oldText  = textNode.nodeValue;
    var newText  = oldText.replace (/Главная/ig, "Home");
    newText      = newText.replace (/Скрин(лист|шоты)/ig, "Images");
    newText      = newText.replace (/Последние поблагодарившие/ig, "Last Who Thank");
    //...
    //repeats word by word until ends at the line below     
    textNode.nodeValue = newText;
}

我没有看到使用这两种方法替换文本的好处，因为其中任何一种都有效。

无法更改div中的文本