Unable to change text from div

Question

I have a script that translates the Russian forum word for word using TreeWalker , but there is one kind of div element that I cannot change my text and that my question is, how do I change it? Since the forum requires registration, I will try to provide every detail of the code that I can below.

---

The code of the webpage where I am trying to change the text:

<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> 

• I am trying to change Screenshots for images from the sp-head class, which I click to display images.

---

CSS code for this 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; } 

---

my code is below:

 //... 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; } 

---

What i tried

I already tried a bunch of jQuery filters that could get this child div, but it never was.

When I select the div itself using:

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

The console result is empty.

When I run the code that I posted here (under my code below the header), the result

for jText and jThis vars respectively

And finally, when trying

 $('div.sp-wrap div:contains("")').each( function (){ var jThis = $(this); var jText = jThis.text(); jThis.text("Images"); }); 

I get the word "Images" replacing real images

Also fails when I tried to use

 $('div.sp-wrap div:contains("")').each( function (){ var jThis = $(this); var jText = jThis.text(); jThis.parent().text("Images"); }); 

Result in destroyed shell

---

Like text similar to others, I could not understand why TreeWalker did not “see” such div text.

---

• Added to refine comments

All span tags are closed, even images closed on it are closed.

Answer 1

Yesterday I found out a solution and could not publish it here earlier. The contents of the wrapper are AJAXed , so the item to be selected is not ready when the script is run. To handle this, I used WaitForKeyElements () . I was able to detect the problem by analyzing the list of “last thanked”, and could not believe that I had not seen this before.

Decision:

 //...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 seems you can find text inside the body, but not a discardable title

JavaScript is ever called to make panel assembly change markup, so you will need to check the new markup in the F12 tools after initializing the assembler. I can’t determine which framework you are using, but JQuery.UI tends to change the DOM per ton.

Suggest adding JSFiddle or Plunker.

Answer 3

From what I understand so far, you are trying to replace div tags with text in Russian, such as “Screenshots”, with the English value “Images”, and you are trying to do this using jQuery and TreeWalker workarounds, so here is the code which works for each of them respectively:

Replace text content with 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); }); 

Replace text content with 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; } 

I do not see the benefits of using both methods to replace text, since one of them works.