jQuery update link

Question

Here is html:

<a href="http://site.com/any/different/folders/picture_name.jpg"&gt;Go and win</a>
<a href="http://site.com/not/similar/links/some_other_name.png"&gt;Go and win</a>

How to add some text after last "/" in href attribute (before picture_name.jpg) of each link?

The script should give something like:

<a href="http://site.com/any/different/folders/user_picture_name.jpg"&gt;Go and win</a>
<a href="http://site.com/not/similar/links/user_some_other_name.png"&gt;Go and win</a>

Here user_ is added.

Each link is var img_link

There can be any length of the link.

Answer 1

So I would think that the best solution would make use of splice and join.

jQuery Example

$("a").each(function(){
var arr = $(this).attr("href").split("/")
arr[arr.length-1] = "_user" + arr[arr.length-1];
$(this).attr("href",arr.join("/"));
});

Answer 2

This solution uses regular expressions which are excellent at simple string manipulation such as this:

$('a[href]').each(function() {
  var img_link = $(this).attr('href');
  $(this).attr('href', img_link.replace(/([^\/]+)$/, "user_$1"));
});

Updated to use img_link as requested by OP.

If you already have the img_link variable and your own each() loop, simply use the one line inside the function, i.e.:

  $(this).attr('href', img_link.replace(/([^\/]+)$/, "user_$1"));

Answer 3

Here's one way. Use the following regex on the href attribute:

(http://.+/(?=.+"))(.+)

This will match http://site.com/not/similar/links/ and folders/user_picture_name.jpg separately. Then you can combine the two matches with the text appended in the middle.

Answer 4

You can get the attribute by var hrefText = jQuery('a').attr('href'); you can then modify the hrefText as:

hrefText = hrefText.substr(0,hrefText.lastIndexOf('/'))+'user_'+hrefText.substr(hrefText.lastIndexOf('/')),hrefText.length); //do this in each statement and then set the attribute again.

jQuery('a').attr(hrefText);

Having said that if you have number of links you should not go for a javascript approach

Answer 5

Nice and clean. No splits, no arrays, no regular expressions. :o)

Test it here: http://jsfiddle.net/Pjdtm/

    var index = img_link.lastIndexOf('/') + 1;

       // "result" now stores the new href. 
    var result = img_link.substr(0,index) + 'user_' + img_link.substr(index);