從標簽中的href獲取查詢字符串參數

Question

我的頁面上有一系列<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參數更改為“ orange”。

我的問題是參數更改了字符串中的位置或對於某些鏈接可能根本不存在，並且.param（）函數似乎僅對URL有效。

到目前為止（基於另一個問題的答案），我有這個問題，但它不能說明是否可能沒有“ end_pos”或href中缺少“ fruit =“（盡管第二點似乎更容易）使用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頁面

Answer 1

我用這個功能來做到這一點：

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

Answer 2

這是我用來提取網址參數的一種方法！

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函數以查看其是否存在。 如果存在，請使用新值重新構建您的網址。

為了澄清起見，函數getUrlParameters將為未找到的任何參數返回undefined，根據typeof undefined丟棄它，然后使用新值重建url

Answer 3

你可以使用屬性包含選擇[名* =“值”] "a[href*=fruit]" ，選擇a包含元素"fruit"在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> 

Answer 4

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