How do I use an add on to create a rule to find and replace text in a Site?

Question

I have both stylish and grease monkey installed in Firefox 5. I want to know if either of them or another add on has the capability of finding text and replacing it with something else, or better yet locating a div by its id and replacing the span within with another string of text.

---

From OP comment:

I have a website with a div (id=siteLinkList), with a ul and multiple lis inside the div.

Each li has an a with text that needs to be replaced. I want the script to search for the div and then find and replace text inside that div.

Here is what I have so far:

var els = document.getElementsByTagName("*"); 

for(var i = 0, l = els.length; i < l; i++)
{
    var el = els[i]; 
    el.innerHTML = el.innerHTML.replace(/EGN1935: 5091, Summer B 2011/gi, 'Success'); 
    el.innerHTML = el.innerHTML.replace(/EGN1935: 5088, Summer B 2011/gi, 'Chemistry');
}    

The script works but I fear that it delays the loading time.

Answer 1

Yes, Greasemonkey can do this. (Even Stylish can do this in a limited way with CSS content.)

There must be zillions of scripts that do this at userscripts.org.

See also, related SO questions like:

• Greasemonkey script in Firefox 4, want to change one line of code on webpage

• Use Greasemonkey to remove table

• Find and replace in a webpage using javascript.

You need to post details of what the page is/should-be, before and after.

---

More specific answer based on update(s) from OP:

Speed up your code by focusing on the kinds of elements you want, AMAP, instead of a fetching every element.

Code like so, should work. :

var TargLinks       = document.querySelectorAll ('div#siteLinkList ul li a');
for (var J = TargLinks.length - 1;  J >= 0;  --J)
{
    /*--- Does "EGN1935: 5088, Summer B 2011" only appear in the text of 
        the link or in the href?
        The first block will be more efficient if it works, otherwise use 
        the 2nd block.
    */
    var el          = TargLinks[J];
    el.textContent  = el.textContent.replace (/EGN1935: 5091, Summer B 2011/gi, 'Success'); 
    el.textContent  = el.textContent.replace (/EGN1935: 5088, Summer B 2011/gi, 'Chemistry');
    /* Only use this block if the first block did not work.
    el.innerHTML    = el.innerHTML.replace(/EGN1935: 5091, Summer B 2011/gi, 'Success'); 
    el.innerHTML    = el.innerHTML.replace(/EGN1935: 5088, Summer B 2011/gi, 'Chemistry');
    */
}

Answer 2

You can do this with Firebug - http://getfirebug.com/. Once you install it, activate it by clicking the bug looking icon on the page you want to edit. A view of the HTML document tree will appear, and you can click arrows to drill further down. Alternatively, you can use the pointer icon inside Firebug to select any HTML element on the page (such as a div with a specific ID).

Once you have the element selected, you can select the text that it contains and edit it as you like.

You can edit a ton of other things with this plugin, but it's important to know that once you reload the page your edits will go away.