Remove and Change some texts of a URL in an HTML using Javascript

Question

How can I remove and change some texts of a URL in an HTML using Javascript.

For example, I have this instagram photo in my HTML.

<img src="http://scontent-b.cdninstagram.com/hphotos-xaf1/t51.2885-15/10611172_606838796104009_200732638_s.jpg">

Then I want it to be linked automatically (via javascript) to it's larger image preview here: http://scontent-b.cdninstagram.com/hphotos-xaf1/10611172_606838796104009_200732638_n.jpg

Notice that the _s was changed to _n and the folder /t51.2885-15 was removed in the URL.

So basically I just want a javascript to remove the /t51.2885-15 and replace the _s with _n.

I think this can be achieved using javascript but I don't know why. Can this be easily written with a few lines of code? Or do you have other suggestions other than writing a javascript.

Answer 1

I'd suggest, in plain-JavaScript (as your question doesn't imply your use of any libraries, such as jquery for example):

// wrapped the function as an 'Immediately-Invoked Function Expression' (IIFE)
// so that it'll be called automatically, when encountered:
(function () {
// gets all the images on the page:
    var images = document.querySelectorAll('img'),
// creates an '<a>' element:
        link = document.createElement('a'),
// creates a variable (for later use, within the 'forEach()'):
        newLink;

// uses 'Array.prototype.forEach()' to iterate over the images:
    [].forEach.call(images, function (img) {

    // checks that 'instagram.com' is in the 'src' of the current image:
        if (img.src.indexOf('instagram.com') > -1) {
            // if it is, we clone the created-'a' element:
            newLink = link.cloneNode();

            // set the 'href' of the '<a>' to the 'src' of the image,
            // but first we replace '_s' with '_n', and
            // any sequence of characters starting with a '/' followed by
            // 't51' continuing with alphanumeric characters (a-z, 0-9,
            // case-insensitive) periods ('.') or hyphens ('-') with an
            // empty string (removing that sequence from the 'src'):
            newLink.href = img.src.replace(/(_s)|(\/t51[\w\d.-]+)/g,function (match){
                return match === '_s' ? '_n' : '';
            });

            // insert the '<a>' element before the image:
            img.parentNode.insertBefore(newLink,img);
            // move the image into the '<a>':
            newLink.appendChild(img);
        }
    });
})();

JS Fiddle demo .

This should be placed immediately before the closing </body> tag; in order to run after the DOM has been constructed.

References:

• Array.prototype.forEach() .
• document.querySelectorAll() .
• JavaScript Regular Expressions .
• Node.appendChild() .
• Node.cloneNode() .
• Node.insertBefore() .
• String.prototype.replace() .

Answer 2

You just have to place this img tag under "a" tag like:

 <a href="http://scontent-b.cdninstagram.com/hphotos-xaf1/10611172_606838796104009_200732638_n.jpg"><img src="http://scontent-b.cdninstagram.com/hphotos-xaf1/t51.2885-15/10611172_606838796104009_200732638_s.jpg"></a>

this will create hyperlink over image and when you click on image it will navigate to the lager image.

And if you do not want to navigate to next page you will have to register click event over image and onclick event you will change the 'src' attribute of image.(Since i am in hurry right now if you need sample code of this i can provide you later.)

jsfidle for next page navigation is : http://jsfiddle.net/0bsrgtym/

And you can also see the sample code for my second suggestion (it uses jquery) from here: http://jsfiddle.net/e7bLuro5/

Answer 3

Edit, updated

v1 wrapped the image element , as read Question initially as requirement to link from smaller image to larger image. Re-read Question ; appear requirement for smaller image src to be replaced with larger image src ?

Try

v2

$("img[src*=cdninstagram]")
.attr("src", function(i, o) {
  return o.replace(/(t+\d+\.+\d+\-+\d+\/)/, "")
         .replace(/_s/, "_n")
})

jsfiddle http://jsfiddle.net/guest271314/gwdusxuh/