Userscripts.org

Looking for a script to replace a specific text on page i choose to an image

maybe this will help a bit, found a code that replaces hyperlinks to images:

 var image = 'http://url.com/image.png';

var array=document.evaluate("//a[.='word on page']",document,null,6,null);
for(var i=array.snapshotLength-1; (item=array.snapshotItem(i)); i--) {
item.textContent='';
var img = document.createElement('img');
img.setAttribute('src', image);
item.appendChild(img);
}

Bump, bump, bump? ;-)

Can you give an example of a page with text you want to replace, pointing out where it is on the page? Details matter when you're using document.evaluate to drill down to it.

Also, there might be better samples available as a starting point. For example, a script that applies a style such as highlighting (background-color) to arbitrary text in a page would need to find that text then insert HTML tags around the text without changing the neighboring text. (Come to think of it, the scripts that create those annoying double-underlined inline ads do that...)

lolol ;D

well the page is actually in my modem's settings page, I have many clients connected, so I want to replace their MAC addresses with images to recognize them, because unfortunately the modem doesn't show their computer names.

I think it is using javascript to display client's MAC addresses that are connected to the modem, when I view the page source code, it doesn't show any MAC address, just a bunch of javascript lines.

Please use Pastebin.com or similar for posting code, rapidshare isn't much fun to navigate.

To get the page code that the Javascript generates, install:
https://addons.mozilla.org/en-US/firefox/addon/...
and use the 'View Generated Source' command.

done.

http://pastebin.com/HZuE0DTp

starts in line 167
I replaced the mac addresses with the word "BIGMAC"

here's a pic of what the page looks like:
http://imageshack.us/photo/my-images/688/rtrtmw...

You could try something like

  var addressMap = {
    // Put your MAC addresses and image URLs here. Example:
    "02:00:00:00:00:00": "http://some.image",
    /* ... */
  };
  var xpath = "//td[3][string-length(.) = 17]";
  // All td elements that are the third child and have textContent.length==17,
  // but anything not in the map will be skipped over later, so you can use
  // something more broad instead, even just "//td".
  var result = document.evaluate(xpath, document, null,
      XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
  for (var i = 0; i < result.snapshotLength; ++i) {
    var item = result.snapshotItem(i);
    var imgSrc = addressMap[item.textContent];
    if (imgSrc) {
      var img = document.createElement('img');
      img.setAttribute('src', imgSrc);
      img.setAttribute('title', item.textContent);
      item.textContent = '';
      item.appendChild(img);
    }
  }

Doesn't work :(

Any messages on the error console? Also, try putting window.alert(result.snapshotLength); right just before the for-loop to see how many nodes the xpath is matching.

I guess it is possible that the userscript is running before the page's javascript has fully created the table. You might be able to fix this by wrapping your code in window.addEventListener('load', function () { /* put code here */ }, false);.

Another possibility is that there is unnecessary whitespace or otherwise something odd about the formatting of the MAC addresses. You can try changing the xpath to "//td" (or even "//*") to match all table cells (or all elements). However, the data you put in the addressMap still has to match. If whitespace is the issue, it might help to change the xpath to "//td[3][string-length(normalize-space(.)) = 17]" and the line var imgSrc = addressMap[item.textContent]; to var imgSrc = addressMap[item.textContent.trim()];.

I tried all, still nothing.

but I didn't understand about the window.alert(result.snapshotLength);
where exactly should I put this?

-----------------------------------------------------

and about the error:

Timestamp: 7/7/2012 4:12:15 AM
Error: missing ) after argument list
Source File: file:///C:/Users/x/AppData/Roaming/Mozilla/Firefox/Profiles/3234.default/gm_scripts/BIGMAC/BIGMAC.user.js
Line: 12
----------------------------------------------------------

oh just to make sure i'm doing this right:
window.addEventListener('load', function () { /* put code here */ }, false);.

I replace the "put code here" with the code, and leave the /* and */ ?

Stuff between /* and */ is a comment in Javascript (as is everything from // to the end of the line), so, you need to take those out too. Here, I'll paste the whole thing again:

window.addEventListener('load', function () {
  var addressMap = {
    // Put your MAC addresses and image URLs here. Example:
    "first MAC address": "first image URL",
    "second MAC address": "second image URL",
  };
  var xpath = "//td[3][string-length(normalize-space(.)) = 17]";
  var result = document.evaluate(xpath, document, null,
      XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
  window.alert(result.snapshotLength);
  for (var i = 0; i < result.snapshotLength; ++i) {
    var item = result.snapshotItem(i);
    console.log(item);
    var imgSrc = addressMap[item.textContent.trim()];
    if (imgSrc) {
      var img = document.createElement('img');
      img.setAttribute('src', imgSrc);
      img.setAttribute('title', item.textContent);
      item.textContent = '';
      item.appendChild(img);
    }
  }
}, false);

That error appears to be due to the interpreter getting confused by the nesting of /* */-style comments and shouldn't have been the original problem.

still nothing, I even tried changing the xpath to "//td" and "//*"

but there's no error from the script, though there are so many other duplicated errors on the error console.

here: http://pastebin.com/Jwcy1Kyy

You aren't even getting the alert dialog box (which should just have a number in it)? Try running the script without any modifications. It won't do anything useful, but at least it should bring up an alert. If even that does nothing... perhaps something isn't installed right? (Though if that were the case, I'm not sure how the previous error message came up.)

var cells = document.querySelectorAll('td'), mac;
var images = {
	"01:00:00:00:00:00" : "http://some_image.url",
	"02:00:00:00:00:00" : "http://some_image.url",
	"03:00:00:00:00:00" : "http://some_image.url",
	"04:00:00:00:00:00" : "http://some_image.url"
};
for (i=0; i<cells.length; i++) {
	mac = cells[i].innerHTML.match(/(?:[\da-f]{2}\:?){6}/i);
	if (mac && images.hasOwnProperty(mac[0])) {
		cells[i].innerHTML = '<img src="' + images[mac[0]] + '">';
	}
}

Fill the images object with valid macs and image urls.

@kuzu

actually I got the alert box with the number 0, but it only appears when I try the code on a website (trying to change a word), but not on my modem's settings page.

@AmpliDude

didn't work :(

Maybe the data is being loaded / generated after the userscript runs its code.

What about this:

var images = {
	"01:00:00:00:00:00" : "http://some_image.url",
	"02:00:00:00:00:00" : "http://some_image.url",
	"03:00:00:00:00:00" : "http://some_image.url",
	"04:00:00:00:00:00" : "http://some_image.url"
};

function check(e) {
	if (e.target.nodeName == "TD") {
		mac = e.target.textContent.match(/(?:[\da-f]{2}\:?){6}/i);
		if (mac && images.hasOwnProperty(mac[0])) {
			e.target.innerHTML = '<img src="' + images[mac[0]] + '">';
		}
	}
}

document.addEventListener("DOMNodeInserted", check, false);

nada :(

What does this output (the log messages should show up on the error console)?

function cnt(xpath) {  return document.evaluate(xpath, document, null,
      XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotLength;
}
function logStuff(s) {
  GM_log("[" + s + "] *:" + cnt("//*") + " t:" + cnt("//td") + " 3:" +
    cnt("//td[3]") + " l:" +
    cnt("//td[string-length(normalize-space(.)) = 17]") + " ::" +
    cnt("//td[contains(':', .)]") + " n:" +
    cnt("//td[3][string-length(normalize-space(.)) = 17]") + " N:" +
    cnt("//td[3][string-length(normalize-space(.)) = 17][contains(':', .)]"));
}
logStuff('start');
window.addEventListener('load', function () {
  logStuff("onload");
  window.setTimeout(function () { logStuff("load+5sec"); }, 5000);
}, false);

zip :(

Have you made sure the script is running on your modem page? Take a look at the url include settings for the script.

yes, I made it to work on any page by including *

Try running this code - every 2 seconds it should display at the top of the page "Found # table cells and # MACs".

var cells, mac, macCount;
function siteCheck() {
	macCount = 0;
	cells = document.querySelectorAll('td');
	for (i=0; i<cells.length; i++) {
		mac = cells[i].innerHTML.match(/(?:[\da-f]{2}\:?){6}/i);
		if (mac) macCount++;
	}
	div = document.createElement("div");
	div.innerHTML = "Found " + cells.length + " table cells and " + macCount + " MACs";
	document.body.insertBefore(div, document.body.firstElementChild);
}
setInterval(siteCheck, 2000);

weird this code works on the main page of the modem (http://192.168.1.1/)
"Found 48 table cells and 0 MACs"

but doesn't work on any other page.

sorry if this was important, but the pages are viewed in frames (navigation frame on the left, pages on the right), and the main URL is always (http://192.168.1.1/html/content.asp) after I login.

but I tried viewing the pages directly of course with their direct URL.
the direct URL of the page that shows the MAC addresses is:
http://192.168.1.1/html/status/ethenet.gz.html

Shouldn't the script work on any page? I mean I set the "included pages" to *

Has anyone gotten this to work yet? I've been looking for several hours for something that simply replaces text with an image and can't find anything. IT seems like one of the simplest scripts, very surprised one doesn't exist