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

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小提琴演示 。

参考文献：

• jQuery，来自jQuery API参考 ：
  • attr() 。
  • each() 。
• JavaScript，来自Mozilla开发人员网络的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- attribute属性来存储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