Javascript 从标记中的href获取查询字符串参数

Javascript 从标记中的href获取查询字符串参数,javascript,jquery,html,Javascript,Jquery,Html,我有一个包含一系列 这些参数以较小的方式操纵链接到(“other.jsf”)的最终页面的内容 作为A/B/n测试的一部分,我想根据包含链接的页面上的用户行为更改href中的参数。例如,我想在单击水果之前将其参数更改为“橙色” 我的问题是参数改变了字符串中的位置,或者对于某些链接可能根本不存在,而.param()函数似乎只对URL起作用 到目前为止(基于另一个问题的答案),我有这个问题,但它没有考虑到可能没有“end_pos”或href中缺少“fruit=”的可能性(尽管第二位似乎更容易修复if

我有一个包含一系列

这些参数以较小的方式操纵链接到(“other.jsf”)的最终页面的内容

作为A/B/n测试的一部分,我想根据包含链接的页面上的用户行为更改href中的参数。例如,我想在单击水果之前将其参数更改为“橙色”

我的问题是参数改变了字符串中的位置,或者对于某些链接可能根本不存在,而.param()函数似乎只对URL起作用

到目前为止(基于另一个问题的答案),我有这个问题,但它没有考虑到可能没有“end_pos”或href中缺少“fruit=”的可能性(尽管第二位似乎更容易修复if未定义的类型函数):

$('a')。每个(函数(){
if($(this.attr('href').indexOf('other')>-1){
var hrefStr=$(this.attr('href');
var start_pos=hrefStr.indexOf('fruit=')+1;
VaR EnthPoS=HeRetr.PosixOf('&',StistPoPOS);/ /工作只要水果=苹果在字符串的中间或前部
变量水果=hrefStr.子串(开始位置、结束位置);
...
//放回原处
}
});
我的第二个问题是识别原始href的相同部分以将新字符串放回。不过,在理解了提取方法之后,我可能会得到这个结果


我还应该说,除了通过JavaScript之外,我对.jsf页面没有任何控制权。我使用这个函数来实现这一点:

function getQueryParameters (str) {
  return (str || document.location.search).replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
}

var queryParams = getQueryParameters(myUrl);
结果:

{
    "fruit": "apple",
     ...
}

下面是我用来提取url参数的方法

var getUrlParameter = function(sParam,url) {
    var sPageURL = url;
    if(typeof(sPageURL) === 'undefined' || sPageURL == ''){
        sPageURL = decodeURIComponent(window.location.search.substring(1));
    }
    var sURLVariables = sPageURL.split('&'), sParameterName, i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURI(sParameterName[1]);
        }
    }
};
你问题的第二部分! 如果您的参数是已知的或至少是一个已知的集合,您总是可以用新的值重建url

e、 g。 变量参数=['fruit'、'tree'、'some_other'、'some_other2']//所有可能参数的超集

现在,您可以循环这个数组,并使用每个参数调用getUrlParameter函数来查看它是否存在。如果存在,请使用新值重建url

为了澄清,函数getUrlParameters将为未找到的任何参数返回undefined,根据undefined的类型放弃它,然后使用新值重构url

您可以使用
“a[href*=fruit]”
href
属性处选择
a
包含
“fruit”
的元素,
String.prototype.replace()
苹果“
替换为
橙色“

$([a[href*=fruit]”。attr(“href”),function(\ux,href){
return href.replace(/apple/,“橙色”)
})

而不是
substr
,将参数分开并使用它们。这里有一个详细的例子来帮助你

var url = 'http://www.domain.com/page/other.jsf?fruit=apple&tree=pine&rock=sedimentary';

/**
* Gets params from url as an object
* @param {String} url
* @return {Object}
*/
var getParams = function (url) {
    var params = {};
    var match = url.match(/\?(.*)$/);

    if (match && match[1]) {
        match[1].split('&').forEach(function (pair) {
            pair = pair.split('=');
            params[pair[0]] = pair[1];
        });
    }

    return params;
};

/**
* Converts an object of params into a query string.
* @param {Object} params
* @return {String}
*/
var paramsToString = function (params) {
    return Object.keys(params || {}).map(function (key) {
        return key + '=' + params[key];
    }).join('&');
};

/**
* Replaces url params.
* @param {String} url
* @param {Object} newParams
* @return {String}
*/
var changeParams = function (url, newParams) {
    var params = getParams(url);

    Object.assign(params, newParams);
    return url.replace(/\?(.*)$/, function () {
        return '?' + paramsToString(params);
    });
};

var urlWithNewParams = changeParams(url, {
    fruit: 'banana',
    weasel: 'yes',
});

console.log(urlWithNewParams); // http://www.domain.com/page/other.jsf?fruit=banana&tree=pine&rock=sedimentary&weasel=yes

我很喜欢这个;紧凑,解决了整个问题
var getUrlParameter = function(sParam,url) {
    var sPageURL = url;
    if(typeof(sPageURL) === 'undefined' || sPageURL == ''){
        sPageURL = decodeURIComponent(window.location.search.substring(1));
    }
    var sURLVariables = sPageURL.split('&'), sParameterName, i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURI(sParameterName[1]);
        }
    }
};
 getUrlParameter('fruit',url_after_question_mark);
var url = 'http://www.domain.com/page/other.jsf?fruit=apple&tree=pine&rock=sedimentary';

/**
* Gets params from url as an object
* @param {String} url
* @return {Object}
*/
var getParams = function (url) {
    var params = {};
    var match = url.match(/\?(.*)$/);

    if (match && match[1]) {
        match[1].split('&').forEach(function (pair) {
            pair = pair.split('=');
            params[pair[0]] = pair[1];
        });
    }

    return params;
};

/**
* Converts an object of params into a query string.
* @param {Object} params
* @return {String}
*/
var paramsToString = function (params) {
    return Object.keys(params || {}).map(function (key) {
        return key + '=' + params[key];
    }).join('&');
};

/**
* Replaces url params.
* @param {String} url
* @param {Object} newParams
* @return {String}
*/
var changeParams = function (url, newParams) {
    var params = getParams(url);

    Object.assign(params, newParams);
    return url.replace(/\?(.*)$/, function () {
        return '?' + paramsToString(params);
    });
};

var urlWithNewParams = changeParams(url, {
    fruit: 'banana',
    weasel: 'yes',
});

console.log(urlWithNewParams); // http://www.domain.com/page/other.jsf?fruit=banana&tree=pine&rock=sedimentary&weasel=yes