Question

嗨我需要通过一个onclick事件替换我页面中的所有href，该事件中查询字符串中的参数很少

这是一个示例锚标记

<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>

另一个样本

<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>

我需要提取d-49489-s，d-49489-p，d-49489-o和将锚标记更改为

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

Answer 1

一种方法：

$('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

参考文献：

jQuery，来自jQuery API reference：
- attr()。
- each()。
来自Mozilla Developer Network's JavaScript resource的JavaScript：
- .indexOf()。
- .join()。
- .push()。
- .split()。
- .substring()。

Answer 2

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);
});

Answer 3

很确定你可以使用BBQ插件来做到这一点：

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

它将遍历页面上的所有href并编辑它们。它让您可以非常轻松地对查询参数进行标记。网站上有一些例子。

Answer 4

您无需浏览页面上的所有链接。使用不显眼的JavaScript拦截链接的点击，然后在事件处理程序中返回false，以防止浏览器导航到锚点的href属性中指定的URL。

此外，如果您自己生成页面，则不必解析href，可以使用html5 data-属性来存储JavaScript调用的函数参数：

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;
  });
});

当然，与其使用data-属性不同，您可以随时按照其他答案中的建议对href进行一些解析。但是在加载页面时我不会替换所有的href。这只是替换所有href属性的开销，而用户可能只点击其中一个，或者可能不点击任何内容而离开页面！

JsFiddle

Jquery修改页面上的所有锚标记href并从href属性中提取关键请求参数

4 个答案:

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