How can I replace parts of href link based on url selector

Question

<a class="change_this" href="http://www.site1.com">Link 1 Type 1</a>
<a class="change_this" href="http://MyID.site1.com">Link 1 Type 2</a>
<a class="change_this" href="http://www.site2.com/?refid=myid2">Link 2 Type 1</a>
<a class="change_this" href="http://www.site2.com/myid2/">Link 2 Type 2</a>
<a href="http://www.site3.com/">Nothing changes</a>

I have the above html inside an example page example.html

I need to figure out how to make the www, the MyID, and the myid2 get replaced based on url string selectors passed to the url.

For example if someone visits example.html&cid=alt1?sid=alt2 the url's are changed to

<a class="change_this" href="http://alt1.site1.com">Link 1 Type 1</a>
<a class="change_this" href="http://alt1.site1.com">Link 1 Type 2</a>
<a class="change_this" href="http://www.site2.com/?refid=alt2">Link 2 Type 1</a>
<a class="change_this" href="http://www.site2.com/alt2/">Link 2 Type 2</a>
<a href="http://www.site3.com/">Nothing changes</a>

Server side solutions have been suggested but are not an option I have available for this particular project. I am also VERY new when it comes to coding and need things spelled out as clearly and as simplistically as possible.

ID's have to be unique. Instead of using id="change_this", you could use class="change_this". — goto-bus-stop, Jan 31 '11 at 19:52

score 0 · Answer 1 · edited May 23 '17 at 12:20

0

refer to: Get Querystring values with jquery, look at the second answer.

The following code, from the answer referenced above, will extract all the qs values from the url and allow you to retrieve the value by key.

<script language="javascript">
var urlParams = {};
(function () {
    var e,
        a = /\+/g,  // Regex for replacing addition symbol with a space
        r = /([^&;=]+)=?([^&;]*)/g,
        d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
        q = window.location.search.substring(1);

    while (e = r.exec(q))
       urlParams[d(e[1])] = d(e[2]);
})();

urlParams = {
    enc: " Hello ",
    i: "main",
    mode: "front",
    sid: "de8d49b78a85a322c4155015fdce22c4",
    empty: ""
}

alert(urlParams["mode"]);
</script>

Add this to your page to use the above as well as accomplish what you are looking for:

<script>
$(document).ready(function () {
{
  $('a').each(function(index) {

    var href = $(this).attr("href").text();

    var newHref = href.replace('myid2', urlParams["sid"]);

    $(this).attr("href").text(newHref); 
  } 
}
);
</script>

edited May 23 '17 at 12:20

Community

1
1

answered Jan 31 '11 at 20:29

Shayne Boyer

410
3
9

forgot to mention that you'll need to reference jQuery. – Shayne Boyer Jan 31 '11 at 20:32
I believe this example it a bit incomplete... it lacks support for the "www" and "MyID" parts the asker needs to replace and it might not be as flexible as needed when myid2 is dynamic – Zathrus Writer Jan 31 '11 at 20:53
... I forgot to add that this function will also run through ALL anchors on page, which can cause a bit of an slowdown in older browsers (our replaceable anchors have a "change_this" class assigned) – Zathrus Writer Jan 31 '11 at 21:11
you can alter the $('a').each to be $('a.change_this').each to only grab the anchor tags you want, or alter to it to select whatever you need change. I was simply showing the solution the code snippet given. – Shayne Boyer Jan 31 '11 at 22:00

score 0 · Answer 2 · answered Jan 31 '11 at 21:28

and welcome to the community :-)

Since the answer I'm about to provide is a complex one, I will include as many comments as possible in the code for you. Actually - only those comments are what really makes this answer so long, not the code itself :-D

First of all, my answer uses regular expressions. If you're unfamiliar with them and don't think you'll need to learn them for the future, you can just use the code I've provided and forget about regular expressions. It's quite a heavy stuff, definitely not something to start with when you are new to coding. But it does the job wonderfully nonetheless.

Step 1 - including jQuery library

In your HEAD section of the HTML page, you will need to include this bit of code:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>

This will load the latest jQuery JavaScript library from the nearest location to your visitors. It is used to identify your anchor tags (A) quickly and do the required amendments as needed.

Step 2 - creating functions.js file

We will need to create a new JavaScript file and call it functions.js - you can choose any other name to suit your preference. This file will contain a function to extract GET data (i.e. "sid" and "cid") from your URL. It will also contain a part of code to be executed when document is loaded in the browser, so all existing links can be replaced.

// function to extract GET data from the URL
// source: http://www.netlobo.com/url_query_string_javascript.html
function gup( name )
{
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( window.location.href );
    if( results == null )
      return "";
    else
      return results[1];
}

// this bit will find all anchors with the class "change_this",
// check what type of URL they point to and replace them accordingly
$('a.change_this').each(function() {
    // assign the jQuery representation of current anchor
    // into a variable, so jQuery does not have to build
    // the object for it again later
    var e = $(this);

    // get HREF attribute - the URL
    var e_href = e.attr('href');

    // assign "cid" GET parameter to alt1 and "sid" to alt2 variables
    var alt1 = gup('cid');
    var alt2 = gup('sid');

    // if our HREF attribute matches scheme where myid2 is at the end of link,
    // we will do the neccessary replacements using a regular expression below
    if (e_href.match(/http:\/\/[^\/\n]+\/.[^=\/]+/)) {
            // these are regular expressions and replacement routines
            e_href = e_href.replace(/\?refid=.+/g, 'refid='+alt2);
            e_href = e_href.replace(/(http:\/\/[^\/]+\/)[^\/]+(\/.*?)/g, "$1"+alt2+"$2");
    } else {
            // we have a link that contains a "www" or some "MyID" string
            // at the beginning and DOES NOT contain any myid2 parts at the end
            e_href = e_href.replace(/http:\/\/[^.]*./g, 'http://'+alt1+'.');
    }

    // finally, we assign our replaced value to the HREF attribute
    e.attr('href', e_href);
});

Don't worry, there are just LOTS of comments in the code, that's why it looks so scary :-D

Now you need to include the functions.js file AFTER the jQuery script in the HEAD section (which we added there before):

    <script type="text/javascript" src="functions.js"></script>

Once these steps are completed, you should get the result you need.

Please note that "myid2" (as in site2.com/?refid=myid2 OR site2.com/myid2/) does not have to be "myid2" - any ID identifier will be matched and replaced.

The same applies for www.site1.com OR MyID.site1.com - as long as there is no further identifier at the end (such as site1.com/?hello=1), this script will work.

what do you think guys, will I make it to the community Wiki? :-D :-D — Zathrus Writer, Jan 31 '11 at 21:29

How can I replace parts of href link based on url selector

2 Answers2

Step 1 - including jQuery library

Step 2 - creating functions.js file