Javascript: How to loop through document and change a few words?

Question

I'm doing this just to learn a bit about Firefox plugins and Javascript. I'm new to Javascript and FF plugins. I've been Googling for 2 hours, read about 30 different pages on the subject, but no page really matches what I'm trying to do. If you didn't guess, I learn best by looking at code.

Not using Jquery, just raw Javascript. I might get to Jquery later, but not now.

I'd like to loop through certain elements on a web page, like a, p, div, and change any words in their displayed html (.innerHTML). But I'm having problems. Here's my code.

// Change the text in these elements.
var eleArr=['a', 'p', 'h1', 'h2', 'blockquote', 'div', 'td', 'li'];
var fromArr=['men', 'man', 'Men', 'Man', 'guy', 'guys', 'girl', 'Girl'];
var toArr=['Blues', 'Blue', 'Blues', 'Blue', 'blue', 'blues', 'pink', 'pink'];
var i;

console.log("Starting, eleArr.length="+eleArr.length);

// First loop through every element to check for string in fromArr[].
for (i=0; i < eleArr.length; i++)
  {
  //console.log("Checking element "+eleArr[i]);
  test1(eleArr[i]); // Process one element at a time.
  }


////////////////////////////////////////////////////////////////
function test1(mytag)
{
var elements = document.getElementsByTagName(mytag);
var i, j;

console.log("Test1: Checking element '"+mytag+"'");

for (i=0; i<elements.length; i++) // Loop through all elements with mytag.
  {
    // Loop through fromArr[] here.
    for (j=0; j<fromArr.length; j++)
      {
      var s=fromArr[j];
      var re=/s/ig; // Creates regex object.
      var ele=elements[i];
      var oldhtml=ele.innerHTML;
      if (oldhtml.indexOf(fromArr[j]) >= 0)
        {
          console.log("TEST1: Found: "+fromArr[j]+" in ele '"+mytag+"': "+oldhtml);
        oldhtml.replace(re, toArr[j]);
        ele.innerHTML=oldhtml;
          console.log("TEST1: Replaced with: "+oldhtml)
        }
      }
  }
}

The first element it finds is a element, but it has tons of child elements in the ele.innerHTML. How do I grab just the displayed HTML text? Example of first element grabbed.

<div>
<p class="parent"></p>
<a href="http://www.some.com">some link</a>. 
</div>

Technically, the element does not have any displayable text to change. But the 'a' anchor element does have text to look at which is 'some link'.

What am I doing wrong here?

Thank you.

Answer 1

I found the answer here. The problem was how I was processing the elements.

http://commons.oreilly.com/wiki/index.php/Greasemonkey_Hacks/Beautifying_the_Web#Straighten_Smart_Quotes

Now I have the basic way to do this I'm having another problem. When I change 'man' to 'blue' I only want to change whole words, but it isn't working. I'm not sure what the regex would be to do this.

INPUT: Many a man has good manners man.

CURRENT OUTPUT: Bluey a blue has good blueners blue.

EXPECTED OUTPUT: Many a blue has good manners blue.

Notes:

• Cannot do .replace on .innerHTML. Why it's not as easy as it seems.
• Same guy above has a solution which works in most cases.