replace text to image *request*

in Ideas and script requests
Subscribe to replace text to image *request* 23 posts, 7 voices



Greasebaboon User
FirefoxWindows

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);
}

 
Jefferson Scher Scriptwright
FirefoxWindows

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

 
Greasebaboon User
FirefoxWindows

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.

 
mike cupcake Scriptwright
FirefoxMacintosh

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.

 
Greasebaboon User
FirefoxWindows

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

 
kuzu Scriptwright
FirefoxMacintosh

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);
    }
  }

 
Greasebaboon User
FirefoxWindows

Doesn't work :(

 
kuzu Scriptwright
FirefoxMacintosh

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()];.

 
Greasebaboon User
FirefoxWindows

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 */ ?

 
kuzu Scriptwright
FirefoxMacintosh

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.

 
Greasebaboon User
FirefoxWindows

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

 
kuzu Scriptwright
FirefoxMacintosh

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

 
AmpliDude Scriptwright
FirefoxWindows

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.

 
Greasebaboon User
FirefoxWindows

@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 :(

 
AmpliDude Scriptwright
FirefoxWindows

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

 
Greasebaboon User
FirefoxWindows

nada :(

 
kuzu Scriptwright
FirefoxMacintosh

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

 
Greasebaboon User
FirefoxWindows

zip :(

 
Tim Smart Scriptwright
ChromeX11

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

 
Greasebaboon User
FirefoxWindows

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

 
AmpliDude Scriptwright
FirefoxWindows

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

 
Greasebaboon User
FirefoxWindows

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 *

 
Crepes Scriptwright
FirefoxWindows

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