Replace 1 div with another div ?

[binarynot]

This is greasemonkey script.

How can I replace image1 with imgage2 ?

<div class="it1"><img src="http://www.example.com/image 1.png">
<div class="it2">init~/c1/1gfh6/sdaimage2.png </div>

I also tried to search for "init~" but it did not work :(

Any help is appreciated. thank you.

This is what I got so far. It will replace all images with 1 static image. No mater how I tried it simply wont replace the image 1 with img 2

// ==UserScript==
// @name Hello World
// @namespace [oreilly.com...]
// @description example script to alert "Hello world!" on every page
// @include http://example.com/*
// ==/UserScript==

//get all images
var allImgs, thisImg;
var allImgs = document.evaluate('//img[@src]', document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

//step through each image
//-------------------------------------------------------------------------------------------
for (var i=1;i <allImgs.snapshotLength;i++) {
var thisImg = allImgs.snapshotItem(i);

var src = thisImg.src;
var srcMatch = src.match('^http://www.example.com/image 1.png');
if (srcMatch != null) {
thisImg.src = 'http://example.com/2009/10/had_frame.png'
}
}

[edited by: Fotiman at 6:50 pm (utc) on Feb 16, 2010]
[edit reason] Examplified URLs [/edit]

[Fotiman]

Does your image really have a space in it? If so, I'm guessing you need to escape that as %20

Also, if you're going to use a RegExp (using the match method), you'll need to escape all of the special characters in that string. Have you tried this instead?

if (src == 'http://www.example.com/image 1.pnp') {
  thisImg.src = 'http://example.com/2009/10/had_frame.png';
}

[binarynot]

No it does not have space, this how the webpage source looks like. I think I need to obtain the Part of the url text from the between <div>text</div> & then replace the URLS.

Replacing first image works because its actyally an image between div tags. And I use this to get the sourcr of the image. But for second image I need to obtain text. I dunno how to do it yet.

var image = thisDiv.getElementsByTagName('img');
image.src

First image:
----------------------------------------
<div class="it1"><img src="http://example.com/img/imgicon.png" alt="img" class="it"></div>
<div class="it2" id="i207419" <img src="http://example.com:81/1e/7a/0-jpg_l.jpg"></div>

Secind & all other images look like this:
----------------------------------------
<div class="it1" <img src="http://example.com/img/imgicon.png" alt="img" class="it"></div>
<div class="it2" id="i207367">init~/73/5c/100-png_l.jpg~[Mita Ryusuke] Dragon Half - Volume 4 ENG</div>

[edited by: Fotiman at 6:51 pm (utc) on Feb 16, 2010]
[edit reason] Examplified URLs [/edit]

[Fotiman]

Perhaps something like this:

var it1 = document.getElementById('it1'),
  targetImg = it2.getElementsByTagName('img')[0],
  it2 = document.getElementById('it2').textContent;
targetImg.src = it2;

[binarynot]

How can I code my text like you did? those code tags are not working hire?

I think I have figured it out. for final test I need to put ll those URLS I extracted into an array so I can use it lather when replacing image URLS. the problem is that the array is not working:

I do this:
var myArray = [];

Then while inside the loop:

myArray[i] = 'http://example.com:81' + mySplitResult;

And after the loop:

alert(myArray[0]); 

Result = Undefined

// ==UserScript==
// @name Hello World
// @namespace http://www.oreilly.com/catalog/greasemonkeyhacks/
// @description example script to alert "Hello world!" on every page
// @include http://example.com/*
// ==/UserScript==

//get all DIVs of the snap_preview class
var myArray = [];
var thisDiv, msg = ''; 
var allDivs = document.evaluate("//div[@class='it1']", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
var textNodes = document.evaluate("//text()", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

for (var i=0; i<textNodes.snapshotLength; i++) {
 var node = textNodes.snapshotItem(i);
 
 var src = node.data;
var srcMatch = src.match('^init'); //Search for init
if (srcMatch != null) {

// Remove Init~
var myOldString = node.data;
var myNewString = myOldString.replace("init~", '');

// Split by ~ & keep only URL
var mySplitResult = myNewString.split("~");
mySplitResult = mySplitResult[0]

//Put URL into an array
myArray[i] = 'http://example.com:81' + mySplitResult;


 msg = msg + 'http://example.com:81' + mySplitResult + "\n";
}
}

alert(msg);
alert(myArray); // Show the array containig all URLS
alert(myArray[0]); 

[edited by: Fotiman at 6:53 pm (utc) on Feb 16, 2010]
[edit reason] Examplified URLs [/edit]

[Fotiman]

I post code using:
[quote][pre][code]
// Code
[/code][/pre][/quote]

Note, however, that any lines of whitespace will cause it to not look as nice so I always remove blank lines from my examples.

In your example, I'm guessing that this:

var textNodes = document.evaluate("//text()", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); 

is not returning anything. That is, textNodes is empty, thus you never go into your for loop.