将锚标记 href 替换为 URL 字符串 JavaScript 中的变量

replace anchor tag href with variable from url string javascript

本文关键字：JavaScript 字符串变量 URL href 替换更新时间：2023-09-26

我有以下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，则设置一个指向锚标签的链接

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

虽然我期望如果锚标签href中存在product变量，它将替换现有的产品变量。如果标签中没有产品变量href它将附加它。

代码追加得很好，但不会替换锚标记href中的现有product变量。

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

我该怎么做？

试试这个，

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

试试这个

$('a.link').each(function()
{
    $(this).attr("href", $(this).attr("href").split("product=")[0] + "product=" + getQueryVariable("product"));
});
This works with links already containing product value

你可以做这样的事情：

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

链接：是要修改的链接
：要更改的参数
替换的Val：要用它替换的值

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

将此函数添加到代码中，并将代码更新为：

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

这段代码有效：

$('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);
});

我希望这会有所帮助，

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