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

eulz3vhy  于 2023-02-08  发布在  jQuery
关注(0)|答案(5)|浏览(151)

我有一个包含一系列<a>链接的页面,看起来像这样:

<a href="http://www.domain.com/page/other.jsf?fruit=apple&tree=pine&rock=sedimentary">click me</a>

这些参数以较小的方式操纵最终链接到的页面(“other.jsf”)的内容。
作为A/B/n测试的一部分,我想根据用户在包含链接的页面上的行为来更改href中的参数,例如,我想在点击之前将fruit参数更改为“橙子”。
我的问题是参数改变了字符串中的位置,或者对于某些链接根本不存在,而.param()函数似乎只对url有效。
到目前为止(基于另一个问题的答案),我有这样的代码,但是它没有考虑到可能没有“end_pos”或者如果“fruit=”从href中丢失(尽管这第二位看起来像是使用if undefined-type函数更容易修复)的可能性:

$('a').each(function () {
    if ($(this).attr('href').indexOf('other') > -1) {
        var hrefStr = $(this).attr('href');
        var start_pos = hrefStr.indexOf('fruit=') + 1;
        var end_pos = hrefStr.indexOf('&',start_pos); //works as long as fruit=apple is in the middle or front of the string
        var fruit = hrefStr.substring(start_pos,end_pos);
        ...
        //put modified href back in <a>
    }
});

我的第二个问题是识别原始href的相同部分以将新字符串放回其中。不过,我可能在理解了最初提取它的方法之后才能得到这个结果。
我还应该说,除了通过JavaScript之外,我无法控制.jsf页面

xqnpmsa8

xqnpmsa81#

我使用这个函数来完成这个任务:

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",
     ...
}
rks48beu

rks48beu2#

这里有一种方法,我用来提取网址参数!

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

问题的第二部分!如果你的参数是已知的或者至少是已知的集合,你总是可以用新的值来重建url。
例如,变量参数=[“水果”、“树”、“其他某个”、“其他某个2”];//所有可能参数的超集。
现在你可以循环遍历这个数组,调用getUrlParameter函数,看看它是否存在,如果存在,用新的值重新构造你的url。
为了说明起见,函数getUrlParameters将为任何未找到的参数返回undefined,基于typeofundefined将其丢弃,然后使用新值重新构造url

5f0d552i

5f0d552i3#

较新的浏览器支持非常简单的const params = new URL(href).searchParams,然后使用params.get("query")检索值

p8ekf7hl

p8ekf7hl4#

代替substrsplit将参数分开并使用它们。这里有一个详细的例子来帮助你。

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
iqxoj9l9

iqxoj9l95#

您可以使用Attribute Contains Selector [name*="value"]"a[href*=fruit]"来选择a元素,这些元素在href属性、.attr(attributeName, function)String.prototype.replace()处包含"fruit",以便将"apple"替换为"orange"

$("a[href*=fruit]").attr("href", function(_, href) {
  return href.replace(/apple/, "orange")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<a href="http://www.domain.com/page/other.jsf?fruit=apple&tree=pine&rock=sedimentary">click me</a>

相关问题