从a标签的href中获取查询字符串参数

Question

我有一个页面，其中包含一系列类似于以下代码的链接：

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

这些参数会轻微地操纵最终链接到的页面（"other.jsf"）的内容。

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

我的问题是，这些参数在字符串中可能会更改位置，或者对于某些链接可能根本不存在，而 .param() 函数似乎只适用于 URL。

到目前为止（基于另一个问题的答案），我有以下代码，但它没有考虑到可能没有 "end_pos" 或如果 href 中缺少 "fruit="（尽管第二个问题似乎更容易通过 if 未定义类型函数解决）：

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

我的第二个问题是如何识别原始链接中相同的部分，以将新字符串放回去。不过，我想在了解提取它的方法之后可以解决这个问题。

另外，我应该说我无法通过JavaScript以外的方式控制 .jsf 页面。

- tymothytym

Answer 1

不要使用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

- reergymerej

Answer 2

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

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

- Quentin Roger

Answer 3

这是我用来提取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]);
        }
    }
};

使用方法

 getUrlParameter('fruit',url_after_question_mark);

你的问题的第二部分！如果你的参数已知或者至少有一个已知的集合，你总是可以使用新值重构URL。

例如： var params = ['fruit','tree','some_other','some_other2'];//所有可能参数的超集。

现在，你可以遍历该数组，并对每个参数调用getUrlParameter函数以查看它是否存在。如果它存在，则使用新值重构你的URL。

仅供澄清，getUrlParameters函数将对任何未找到的参数返回undefined，根据undefined的typeof丢弃它，然后使用你的新值重构URL。

- Anubhab

Answer 4

你可以使用 属性包含选择器 [name*="value"] "a[href*=fruit]" 来选择包含 "fruit" 的 a 元素在 href 属性中，.attr(attributeName, function) ，String.prototype.replace() 用于将 "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>

- guest271314

---

我非常喜欢这个；它很简洁，解决了整个问题。 - tymothytym

Answer 5

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

- Carter