12

How do I rewrite an href value, using jQuery?

I have links with a default city

<a href="/search/?what=parks&city=Paris">parks</a>
<a href="/search/?what=malls&city=Paris">malls</a>

If the user enters a value into a #city textbox I want to replace Paris with the user-entered value.

So far I have

var newCity = $("#city").val();
ram1
  • 6,290
  • 8
  • 41
  • 46
  • I would recommend doing this with forms, because the way you are doing it now makes your search function unusable without javascript. – Kokos Jun 30 '11 at 20:11

4 Answers4

31

Given you have unique href values (?what=parks, and ?what=malls) I would suggest not writing a path into the $.attr() method; you would have to have one call to $.attr() for each unique href, and that would grow to be very redundant, very quickly - not to mention difficult to manage.

Below I'm making one call to $.attr() and using a function to replace only the &city= portion with the new city. The good thing about this method is that these 5 lines of code can update hundreds of links without destroying the rest of the href values on each link.

$("#city").change(function(o){
  $("a.malls").attr('href', function(i,a){
    return a.replace( /(city=)[a-z]+/ig, '$1'+o.target.value );
  });
});

One thing you may want to watch out for would be spaces, and casing. You could convert everything to lower case using the .toLowerCase() JavaScript method, and you can replace the spaces with another call to .replace() as I've down below:

'$1'+o.target.value.replace(/\s+/, '');

Online Demo: http://jsbin.com/ohejez/

Sampson
  • 265,109
  • 74
  • 539
  • 565
  • 1
    why use regular expressions when you don't have to? wouldn't that technically be slower and err...clunkier? – AndyL Jun 30 '11 at 19:56
  • 3
    @AndyL Because tomorrow the URL may not be `/search/?what=parts&city=Paris`, but instead `/search/?when=afternoon&what=parks&city=Paris` or some other variant. You shouldn't have to go and rewrite your JavaScript to accommodate those types of changes; it would be far too burdensome, in my sincere opinion. – Sampson Jun 30 '11 at 19:59
  • @ryaz I've re-factored a bit to reduce the amount of code involved. – Sampson Jun 30 '11 at 20:07
  • @AndyL Another thing to consider is if the fact the user has two links, with two different url structures. One starts with `?what=parks` while the other `?what=malls`. My method above will focus only on the `&city=[a-z]` part, leaving the rest as it was to begin with. If we overwrite the entire path, we overwrite `?what=parks` with `?what=malls`. – Sampson Jun 30 '11 at 20:12
  • Also know that this regular expression leaves something to be desired. There's no support for spaces, space encodings, hyphens, dashes, or any other special character (or special character encodings) that are allowed as parameters in URLs. – Ty. May 29 '18 at 14:12
17
 $('a').attr("href", "/search/?what=parks&city=" + newCity);
AndyL
  • 1,615
  • 1
  • 13
  • 15
5

As soon as a key is released within the #city input field, the href will be updated.

$('#city').keyup(function(){

    $('a').attr('href','/search/?what=parks&city='+$(this).val());

});
Kokos
  • 9,051
  • 5
  • 27
  • 44
  • thanks !! good one. Even though I made some changes... I've added "onkeyup" callback to the "input". something like and in this callback function I've added the code. Thanks !! – OhadR Aug 21 '12 at 14:37
2

Like this:

var newCity = $("#city").val();

$('a').attr('href', '/search/?what=parks&city=' + newCity);

EDIT: Added the search string

Phil
  • 10,948
  • 17
  • 69
  • 101