CODEWITHSUNDEEP
javascriptjquery
dpsdce
dpsdce

Reputation: 5450

Jquery to modify all anchor tag href on a page and extract key request parameters from href attribute

hi i need to replace all the href's in my page by a onclick event which has few of the parameters from the query string

here is a sample anchor tag

<a href="google.com?businessunit=Products&dataSegement=BOTH_PERIOD&endDate=12%2F06%2F2011&d-49489-s=8&d-49489-p=1&d-49489-o=2&catid=3">Demo Anchor</a>

another sample

<a href="google.com?businessunit=Products&dataSegement=BOTH_PERIOD&pubgrpid=6&endDate=12%2F06%2F2011&d-49489-s=8&d-49489-p=1&d-49489-o=2&marketid=1analysisType=conversion&catid=3">Another sample</a>

i need to extract the values of d-49489-s, d-49489-p, d- 49489-o and change anchor tag to something like 

  <a href="#" onclick="callMethod(d-49489-s,d-49489-p, d-49489-o )">

Upvotes: 0

Views: 3367

Answers (4)

Cory Danielson
Cory Danielson

Reputation: 14501

http://jsfiddle.net/9t2dP/1/

$('a').each(function(e){
    var queryString = this.href;
    queryString = queryString.substring(queryString.indexOf('?'), queryString.length);

    var params = new Array();

    while (queryString)
    {
        var start = queryString.indexOf('&d-')+1;
        var end = start+9;
        if (start) { //if param found, save and truncate query string
            params.push(queryString.substring(start, end));
            queryString = queryString.substring(end, queryString.length);
        }
        else
            queryString = '';
    }

    var functionCall = 'callMethod('+params[0]+', '+params[1]+', '+params[2]+');';
    $(this).attr('onclick', functionCall);
});

Upvotes: 1

amiuhle
amiuhle

Reputation: 2773

You don't have to go through all the links on the page. Use unobtrusive JavaScript to intercept clicks to the links and then return false in the event handler to prevent the browser from navigating to the URL specified in the anchor's href attribute.

Also, if you are generating the page yourself, you don't have to parse the href, you can use html5 data- attributes to store the function arguments for your JavaScript calls:

HTML:

<a href="asdf.html?a=b&c=d" data-ajax-params="{&quot;a&quot;: &quot;b&quot;, &quot;c&quot;: &quot;d&quot;}">Test</a>
<a href="asdf.html?a=b&c=d" data-ajax-params="[&quot;b&quot;, &quot;d&quot;]">Test</a>

JavaScript:

$(function() {
 $('a').click(function() {
    //first link will return object with key=value pairs, second link will return an array with just the values
    console.log($(this).data('ajax-params'));
    //do something with the parameters
    
    
    //make sure to return false to prevent the browser from navigating to href URL
    return false;
  });
});

Of course, instead of using the data- attribute, you can always do some parsing of the href as suggested in other answers. But I would not replace all the hrefs when the page is loaded. It's simply an overhead to replace all href attributes, while the user might click only on one of them, or maybe leave the page without clicking anything!

JsFiddle

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

One approach:

$('a').each(
    function(){
        var h = this.href;
        var r = h.split('&');
        var reqs = [];
        for (i=0;i<r.length;i++){
            if (r[i].indexOf('d-') == 0){
                reqs.push(r[i].substring(0,r[i].indexOf('=')));
            }
        }
        $(this).attr('onclick','callMethod(' + reqs.join(',') + ')');
    });

JS Fiddle demo.

References:

Upvotes: 3

jjross
jjross

Reputation: 678

Pretty sure you can do this with the BBQ plugin:

http://benalman.com/projects/jquery-bbq-plugin/

It'll go through all hrefs on a page and edit them. It let's you tokenize the query parameters really easily. There are examples on the site.

Upvotes: 0

Related Questions