无法更改 div 中的文本

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>

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

CSS 代码 class:

.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 child 的过滤器，但它并不存在。

当我 select div 本身使用时：

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

控制台结果为空

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

分别用于 jText 和 jThis 变量

最后当我尝试时

$('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

您似乎可以在 body 中找到文本，但找不到可折叠标题

调用 JavaScript 以使面板可折叠会更改标记，因此您需要在初始化可折叠后检查 F12 工具中的新标记。我无法确定您使用的是什么框架，但 JQuery.UI 往往会大量改变 DOM。

建议您添加一个 JSFiddle 或 Plunker。

Answer 2

据我目前的了解，您正在尝试将 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;
}

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

Answer 3

昨天我想出了解决办法，但以前在这里 post 无法解决。换行内容是 AJAXed，因此当脚本运行时要选择的元素还没有准备好。为了处理这个问题，我使用了 WaitForKeyElements()。在分析 "last who thanked" 列表后，我能够检测到这个问题，我不敢相信我以前从未见过它。

解决方案：

//...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");

    }

}

无法更改 div 中的文本

Unable to change text from a div

javascript

jquery

html

ajax

greasemonkey

我试图更改文本的网页特定代码：

CSS 代码 class:

我的代码如下：

我试过的

当我 select div 本身使用时：

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

最后当我尝试时

我尝试使用

使用 jQuery 替换文本内容：

使用 TreeWalker 替换文本内容

解决方案：

无法更改 div 中的文本

Unable to change text from a div

javascript

jquery

html

ajax

greasemonkey

我试图更改文本的网页特定代码：

CSS 代码 class:

我的代码如下：

我试过的

当我 select div 本身使用时：

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

最后当我尝试时

我尝试使用

使用 jQuery 替换文本内容：

使用 TreeWalker 替换文本内容

解决方案：

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