javascript - How to relink/delink image URLs to point to the full image?

Question

I'm trying to change the URL's of a webpage on the fly using Greasemonkey.

The target page has links like:

<a name="217258323" href="http://foobar.net/photo/217258323/?pgid=&amp;gid=4933418&amp;page=0">
  <img style="border:1px solid #fff;padding:5px;background:#fff;"
    height="120" width="160" alt="Gallery pic 1 of 20 pics" border="0"
    src="http://i.foo.net/images/thumb/52/217/217258323.jpg">
</a>

I want to change them like:

<a name="217258323" href="http://i.foo.net/images/full/52/217/217258323.jpg">
  <img style="border:1px solid #fff;padding:5px;background:#fff;"
    height="120" width="160" alt="Gallery pic 1 of 20 pics" border="0"
    src="http://i.foo.net/images/thumb/52/217/217258323.jpg">
</a>

That is, I want replace the link href with the image src value -- but with /full/ instead of /thumb/.

Any sample scripts or examples to achieve what I'm trying to do?

Answer 1

I think you want something like this,

> var s = '<a name="217258323" href="http://foobar.net/photo/217258323/?pgid=&amp;gid=4933418&amp;page=0">
   <img style="border:1px solid #fff;padding:5px;background:#fff;"
     height="120" width="160" alt="Gallery pic 1 of 20 pics" border="0"
     src="http://i.foo.net/images/thumb/52/217/217258323.jpg">
 </a>';
undefined
> var f = s.replace(/(href=")[^"]*([sS]*?)(src=")([^"]*)([Ss]+?</a>)/g, '$1$4$2$3$4$5');
undefined
> var result = f.replace(/thumb(?=.*thumb)/, 'full');
undefined
> result
'<a name="217258323" href="http://i.foo.net/images/thumb/52/217/217258323.jpg">
   <img style="border:1px solid #fff;padding:5px;background:#fff;"
     height="120" width="160" alt="Gallery pic 1 of 20 pics" border="0"
     src="http://i.foo.net/images/thumb/52/217/217258323.jpg">
 </a>'