how to change variable value in links with jquery

Question

I want to change the variable values in all links on the page. If the links looks like this:

<a href="http://www.mypage.com?type=iPhone&userId=1">The 1 link</a>
<a href="http://www.mypage2.com?type=iPhone&userId=1">The 2 link</a>

I want to change type=iPhone to type=Android. But I don't know how to find the type=iPhone so I can replace it?

What is the best way of doing this? Thanks.

Ok, this is my real code.

What Im trying to do is to check for the user agent and change the appType=iPhone if it is an android.

    var ua = navigator.userAgent;
    if (ua.indexOf("Android") >= 0) {
        var androidversion = parseFloat(ua.slice(ua.indexOf("Android") + 8));
        if (androidversion < 4.0) {
           alert("You have an old Android");

        }
        var apptype='appType=Android';
        alert(apptype);

        $("a[href*='appType=iPhone']").attr("href", function () {
        return this.href.replace("appType=iPhone", "appType=Android");
        });
    }
    else
    {   
        var apptype='appType=iPhone';
        alert(apptype); 


    }

And with this it is not changing the appType=iPhone at all, I dont know what Im missing?

first of all, give your <a> tag an id

Raptor
– Raptor

2012-11-28 08:50:40 +00:00
Commented Nov 28, 2012 at 8:50 — Raptor
– Raptor, Commented Nov 28, 2012 at 8:50
@ShivanRaptor why..? i think thats not nescessary

coolguy
– coolguy

2012-11-28 08:51:27 +00:00
Commented Nov 28, 2012 at 8:51 — coolguy
– coolguy, Commented Nov 28, 2012 at 8:51
Are the links rendered serverside?

Henrik Andersson
– Henrik Andersson

2012-11-28 08:51:54 +00:00
Commented Nov 28, 2012 at 8:51 — Henrik Andersson
– Henrik Andersson, Commented Nov 28, 2012 at 8:51
i misread the OP question, no id needed

Raptor
– Raptor

2012-11-28 08:52:48 +00:00
Commented Nov 28, 2012 at 8:52 — Raptor
– Raptor, Commented Nov 28, 2012 at 8:52

James Allardice · Accepted Answer · 2012-11-28 08:59:20Z

5

You can use an attribute ends-with selector to find links with an href ending with "iPhone" and then use the .attr() method to change the value:

$("a[href$='iPhone']").attr("href", function () {
    return this.href.replace("iPhone", "Android");
});

Here's a working example.

Update

Now that you've updated the question and the URLs no longer end with the string you're looking for, you can use an attribute contains selector instead:

$("a[href*='iPhone']").attr("href", function () {
    return this.href.replace("iPhone", "Android");
});

Here's another working example.

edited Nov 28, 2012 at 8:59

answered Nov 28, 2012 at 8:51

James Allardice

166k22 gold badges335 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jamiec · Accepted Answer · 2012-11-28 09:43:16Z

2

This can be done the way you imagine, but seriously - question if that is the best way to achieve your goal.

Using jQuery, you can find elements using an attribute-contains-selector:

$('a[href*="type=iPhone"]');

The *= says "attribute contains"

Then you can just replace the href:

$('a[href*="type=iPhone"]').attr("href",function(){
     $(this).attr('href').replace('type=iPhone','type=Android');
});

However, you should consider there may be a better way to do this. For example if you remove that type=iPhone attribute from the href and instead decide which type=* to append when the user clicks the link, then you dont need to do all that messing about finding and replacing.

For example, starting with this HTML:

<a href="http://www.mypage.com?userId=1">The 1 link</a>
<a href="http://www.mypage2.com?userId=1">The 2 link</a>

Then assuming a variable which contains which type is active:

var osType = 'iPhone'; // change to 'Android' if need be or dynamically - whatever!

Use this jQuery:

$(document).on('click','a',function(e){
    e.preventDefault();
    var href = $(this).attr('href');
    window.location.href = href + '&type=' + osType;
});

Live example of this technique: http://jsfiddle.net/K7UNg/1/

edited Nov 28, 2012 at 9:43

answered Nov 28, 2012 at 8:51

Jamiec

136k15 gold badges143 silver badges202 bronze badges

11 Comments

Claes Gustavsson Over a year ago

Ok, thanks. But what if it doesnt end with that, what if I have more variable after that one? Ill change my question. Just remove the $ and it will find type=iPhone? I will try!

James Allardice Over a year ago

@ClaesGustavsson - Use an "attribute contains" selector instead. (See update to my answer).

Claes Gustavsson Over a year ago

Thanks, I have tested with the above suggestions but I cant get it working. So I will change my question again :-)

Jamiec Over a year ago

@ClaesGustavsson - see update - ive added a jsfiddle example to demonstrate!

Claes Gustavsson Over a year ago

Thanks, but the example is not working for me? No alert or anything.

|

Collectives™ on Stack Overflow

how to change variable value in links with jquery

2 Answers 2

Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related