用网址字符串javascript中的变量替换锚标签href

Question

我有以下的Java脚本代码：

var product = getQueryVariable("product");

$('a.link').each(function()
{
    $(this).attr("href", $(this).attr("href") + "&product=" + getQueryVariable("product"));
});

function getQueryVariable(variable)
{
    var query = window.location.search.substring(1);        

    var variables = query.split("&");

    for (var iCount = 0; iCount < variables.length; iCount++)
    {
        var pair = variables[iCount].split("=");

        if (pair[0] == variable)
            return pair[1];
    }
}

如果url为： http://www.xxxx.com/index.htm?product=abc ://www.xxxx.com/index.htm?product= http://www.xxxx.com/index.htm?product=abc ，它将设置指向锚标记的链接

<a class="link" href="http://www.aaaa.com/index.htm">Click here</a>

如

<a class="link" href="http://www.aaaa.com/index.htm?product=abc">Click here</a>

这就是我想要的，并且做得很好。

但是，如果定位标记在其href已经具有product变量，例如

<a class="link" href="http://www.aaaa.com/index.htm?product=xyz">Click here</a>

然后我得到

<a class="link" href="http://www.aaaa.com/index.htm?product=xyz&product=abc">Click here</a>

而我期待，如果product变量存在于href锚标记，它将取代现有的产品变量。 并且，如果href标记中没有产品变量，则会将其附加。

该代码可以很好地附加，但是不能替换锚标记的href的现有product变量。

因此，问题是如何从所有具有'link'类a标签中获得'product'参数？ 这样我就可以在代码中替换它（如果找到）。 我可以在$('a.link').each(function()获取它吗？

我该怎么做？

Answer 1

您可以执行以下操作：

function changeLinkQueries(link,parameter,replacedVal) {

  // This function is anonymous, is executed immediately and 
  // the return value is assigned to QueryString!
  var query_string = {};
  var query = link.split('?')[1];
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
     var pair = vars[i].split("=");
     // If first entry with this name
     if (typeof query_string[pair[0]] === "undefined") {
       query_string[pair[0]] = decodeURIComponent(pair[1]);
       // If second entry with this name
     } else if (typeof query_string[pair[0]] === "string") {
       var arr = [ query_string[pair[0]],decodeURIComponent(pair[1]) ];
       query_string[pair[0]] = arr;
       // If third or later entry with this name
     } else {
       query_string[pair[0]].push(decodeURIComponent(pair[1]));
     }
  } 

  var queries = query_string,
    linkArr = [];
  queries[parameter] = replacedVal;

  for(query in queries){
    linkArr.push(query + '=' + queries[query]);
  }

  return link.split('?')[0] + '?' + linkArr.join('&');

};

该函数的用法是： changeLinkQueries(link,parameter,replacedVal) ：

• link：是您要修改的链接
• 参数：您要更改的参数
• replaceVal：您要替换的值

示例： changeLinkQueries('http://www.aaaa.com/index.htm?product=xyz','product','test')返回==> http://www.aaaa.com/index.htm？产品=测试

将此功能添加到代码中，并将代码更新为：

var product = getQueryVariable("product");

$('a.link').each(function(){
    $(this).attr("href", changeLinkQueries($(this).attr("href"),'product',getQueryVariable('product')));
});

function getQueryVariable(variable)
{
    var query = window.location.search.substring(1);        

    var variables = query.split("&");

    for (var iCount = 0; iCount < variables.length; iCount++)
    {
        var pair = variables[iCount].split("=");

        if (pair[0] == variable)
            return pair[1];
    }
}

Answer 2

尝试这个，

Array.prototype.contains = function(x){
  return this.indexOf( x ) > -1 ? true : false;
}

var getUrlVars = function(url){
    var vars = [], hash;
    var hashes = url.slice(url.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++){
        hash = hashes[i].split('=');
        vars.push(decodeURIComponent(hash[0]));
        vars[decodeURIComponent(hash[0])] = decodeURIComponent(hash[1]);
     }
     if(vars[0] == url){
        vars =[];
     }
     return vars;
}


var getUrl = function(url){
    var urlParams = getUrlVars(window.location.href),
        linkParams = getUrlVars(url),
        altered = false;

    for(i = 0; i < linkParams.length; i++){
        var t = linkParams[i];
        if(urlParams.contains(t)){
            linkParams[t] = urlParams[t];
            altered = true;
        }
    }
    return altered ? url.split("?")[0] + "?" + linkParams.map(function(y){return y + "=" + linkParams[y]}).join("&") : url;
}

$("a.link").each(function (i,link) {
    link.attr("href",getUrl(link.attr("href")));
})

Answer 3

尝试这个

$('a.link').each(function()
{
    $(this).attr("href", $(this).attr("href").split("product=")[0] + "product=" + getQueryVariable("product"));
});

This works with links already containing product value

Answer 4

此代码有效：

$('a.link').each(function()
{
    var anchor_url = $(this).attr("href");
    var product_val = '';

    if (-1 == anchor_url.indexOf('&product='))
    {
        if (-1 == anchor_url.indexOf('?product='))
            product_val = anchor_url.substr(anchor_url.indexOf('?product=')+'?product='.length);
    }
    else
        product_val = anchor_url.substr(anchor_url.indexOf('&product=')+'&product='.length);

    if (product_val.indexOf('&') != -1) product_val = product_val.substr(0, product_val.indexOf('&'))

    if (product_val == '') new_link = anchor_url+'&product='+getQueryVariable("product");
    else new_link = anchor_url.split(product_val).join(getQueryVariable("product"));

    $(this).attr("href",  new_link);
});

Answer 5

我希望这个能帮上忙，

$(this).attr("href", getQueryVariable($(this).attr("href"), "product"));

function getQueryVariable(hrefLink, variable)
{
    if(hrefLink.contains("product")){
        return hrefLink;
    }else{
        //write your code here and return full url

    }
}