jQuery replace href value but only partially?

Question

Possible Duplicate:
Change href parameter using jQuery

I have a page with several links like this:

<a href="playcats.php?cat='.$catname.'&sl=10" class="golink">

So after PHP page loads it will look like:

<a href="playcats.php?cat=blue&sl=10" class="golink">
<a href="playcats.php?cat=red&sl=10" class="golink">
<a href="playcats.php?cat=yellow&sl=10" class="golink">
...

I want partially change the href for the sl value of all links using jQuery (sl value is picked from a slider = data.value)

I have this:

$(document).ready(function() {
  $('a.golink').each(function() {
    var _href = $(this).attr('href'); 
    $(this).  ( rest of code.. )
  } );
});

And now I do not know how to use replace with regular expressions as I think it is the solution!

your first link, is it getting print through a loop? – Niraj Chauhan Jan 13 '13 at 14:13 — Niraj Chauhan, Jan 13 '13 at 14:13

Denys Séguret · Accepted Answer · 2013-01-13T14:27:59.260

9

You might do

 $(this).attr('href', _href.replace(/sl=[^&]+/, 'sl=newval'));

to replace the value of sl by 'newval'.

You can also use a function to build the new value. For example, say you want to multiply by 2 the old sl value, you may do this :

 $(this).attr('href', _href.replace(/sl=([^&]+)/, function(_, oldval) {
      return 'sl='+(2*parseInt(oldval,10))
 }));

You may even avoid using each :

$('a.golink').attr('href', function(i, v){
  return v.replace(/sl=([^&]+)/, function(_, oldval) {
      return 'sl='+(2*parseInt(oldval,10))
  })
});

Demonstration (over the links to see the href)

edited Jan 13 '13 at 14:27

answered Jan 13 '13 at 14:14

Denys Séguret

372,613
87
782
758

so great dystroy ! ... works perfectly. And also many thanks for the extra function showed here, might also be usefull for my project. Thanks !! – Pedro P Jan 13 '13 at 14:27
@PedroP See also the third solution I gave, avoiding the each. – Denys Séguret Jan 13 '13 at 14:28
ty again dystroy, do you believe is better to use this third solution instead the each way ? – Pedro P Jan 13 '13 at 14:42
Personally I prefer this solution but you might have other things to do in your `each` and I don't think this matters a lot. – Denys Séguret Jan 13 '13 at 14:44
I will use this third solution then because there is not anything more to do in the each. It is only to make this href replace. Thanks! – Pedro P Jan 13 '13 at 14:48

Andrew Whitaker · Answer 2 · 2013-01-13T14:23:37.373

3

How about using the overload of attr that takes a callback function:

$("a.golink").attr("href", function (_, val) {
    return val.replace(/sl=\d+/gi, "sl=new_value");
});

Inside of the function, this is equal to the current <a> tag, so you could determine what value to use there.

Example: http://jsfiddle.net/6zAN7/5/

edited Jan 13 '13 at 14:23

answered Jan 13 '13 at 14:18

Andrew Whitaker

124,656
32
289
307

score 2 · Answer 3 · answered Jan 13 '13 at 14:16

Try this, long code for understanding...

$('a').each(function(){
    // Change this to get slider value
    slider_value = 25;

    var _href = $(this).attr('href'); 
    _href = _href.split("&");
    _href[_href.length] = "sl=" + slider_value;
    _href = _href.join("&");

    console.log(_href);
});

Using regex:

$('a').each(function(){
    // Change this to get slider value
    slider_value = 25;

    var _href = $(this).attr('href'); 
    _href = _href.replace(/sl=[^&]+/, 'sl=' + slider_value);
});

jQuery replace href value but only partially?

3 Answers3

Linked