Добавление параметра в URL с помощью JavaScript

Question

В веб-приложении, использующем вызовы AJAX, мне нужно отправить запрос, но добавить параметр в конец URL, например:

Оригинальный URL:

http://server/myapp.php?id=10

Результирующий URL:

http://server/myapp.php?id=10&enabled=true

Поиск функции JavaScript, которая анализирует URL-адрес, просматривая каждый параметр, затем добавляет новый параметр или обновляет значение, если оно уже существует.

Answer 1

Базовая реализация, которую вам нужно адаптировать, будет выглядеть примерно так:

function insertParam(key, value)
{
    key = encodeURI(key); value = encodeURI(value);

    var kvp = document.location.search.substr(1).split('&');

    var i=kvp.length; var x; while(i--) 
    {
        x = kvp[i].split('=');

        if (x[0]==key)
        {
            x[1] = value;
            kvp[i] = x.join('=');
            break;
        }
    }

    if(i<0) {kvp[kvp.length] = [key,value].join('=');}

    //this will reload the page, it's likely better to store this until finished
    document.location.search = kvp.join('&'); 
}

Это примерно в два раза быстрее, чем решение на основе регулярных выражений или поиска, но это полностью зависит от длины строки запроса и индекса любого совпадения

---

метод медленного регулярного выражения, с которым я сравнил для завершения (примерно на 150% медленнее)

function insertParam2(key,value)
{
    key = encodeURIComponent(key); value = encodeURIComponent(value);

    var s = document.location.search;
    var kvp = key+"="+value;

    var r = new RegExp("(&|\\?)"+key+"=[^\&]*");

    s = s.replace(r,"$1"+kvp);

    if(!RegExp.$1) {s += (s.length>0 ? '&' : '?') + kvp;};

    //again, do what you will here
    document.location.search = s;
}

Answer 2

Вы можете использовать один из них:

• https://developer.mozilla.org/en-US/docs/Web/API/URL
• https://developer.mozilla.org/en/docs/Web/API/URLSearchParams

Пример:

var url = new URL("http://foo.bar/?x=1&y=2");

// If your expected result is "http://foo.bar/?x=1&y=2&x=42"
url.searchParams.append('x', 42);

// If your expected result is "http://foo.bar/?x=42&y=2"
url.searchParams.set('x', 42);

Answer 3

Спасибо всем за ваш вклад. Я использовал код annakata и изменил его, добавив также случай, когда в URL-адресе вообще нет строки запроса. Надеюсь, это поможет.

function insertParam(key, value) {
        key = escape(key); value = escape(value);

        var kvp = document.location.search.substr(1).split('&');
        if (kvp == '') {
            document.location.search = '?' + key + '=' + value;
        }
        else {

            var i = kvp.length; var x; while (i--) {
                x = kvp[i].split('=');

                if (x[0] == key) {
                    x[1] = value;
                    kvp[i] = x.join('=');
                    break;
                }
            }

            if (i < 0) { kvp[kvp.length] = [key, value].join('='); }

            //this will reload the page, it's likely better to store this until finished
            document.location.search = kvp.join('&');
        }
    }

Answer 4

Это очень простое решение. Он не контролирует существование параметра и не изменяет существующее значение. Он добавляет ваш параметр в конец, так что вы можете получить последнее значение в вашем коде конца.

function addParameterToURL(param){
    _url = location.href;
    _url += (_url.split('?')[1] ? '&':'?') + param;
    return _url;
}

Answer 5

Вот значительно упрощенная версия, в которой вместо удобной микрооптимизации компенсируется разборчивость и меньшее количество строк кода (и мы говорим о разнице в несколько миллисекунд, реально ... из-за природы этого текущее местоположение документа), это, скорее всего, будет выполнено один раз на странице).

/**
* Add a URL parameter (or changing it if it already exists)
* @param {search} string  this is typically document.location.search
* @param {key}    string  the key to set
* @param {val}    string  value 
*/
var addUrlParam = function(search, key, val){
  var newParam = key + '=' + val,
      params = '?' + newParam;

  // If the "search" string exists, then build params from it
  if (search) {
    // Try to replace an existance instance
    params = search.replace(new RegExp('([?&])' + key + '[^&]*'), '$1' + newParam);

    // If nothing was replaced, then add the new param to the end
    if (params === search) {
      params += '&' + newParam;
    }
  }

  return params;
};

Вы бы тогда использовали это так:

document.location.pathname + addUrlParam(document.location.search, 'foo', 'bar');

Answer 6

/**
* Add a URL parameter 
* @param {string} url 
* @param {string} param the key to set
* @param {string} value 
*/
var addParam = function(url, param, value) {
   param = encodeURIComponent(param);
   var a = document.createElement('a');
   param += (value ? "=" + encodeURIComponent(value) : ""); 
   a.href = url;
   a.search += (a.search ? "&" : "") + param;
   return a.href;
}

/**
* Add a URL parameter (or modify if already exists)
* @param {string} url 
* @param {string} param the key to set
* @param {string} value 
*/
var addOrReplaceParam = function(url, param, value) {
   param = encodeURIComponent(param);
   var r = "([&?]|&)" + param + "\\b(?:=(?:[^&#]*))*";
   var a = document.createElement('a');
   var regex = new RegExp(r);
   var str = param + (value ? "=" + encodeURIComponent(value) : ""); 
   a.href = url;
   var q = a.search.replace(regex, "$1"+str);
   if (q === a.search) {
      a.search += (a.search ? "&" : "") + str;
   } else {
      a.search = q;
   }
   return a.href;
}

url = "http://www.example.com#hashme";
newurl = addParam(url, "ciao", "1");
alert(newurl);

И обратите внимание, что параметры должны быть закодированы перед добавлением в строку запроса.

http://jsfiddle.net/48z7z4kx/

Answer 7

У меня есть «класс», который делает это, и вот он:

function QS(){
    this.qs = {};
    var s = location.search.replace( /^\?|#.*$/g, '' );
    if( s ) {
        var qsParts = s.split('&');
        var i, nv;
        for (i = 0; i < qsParts.length; i++) {
            nv = qsParts[i].split('=');
            this.qs[nv[0]] = nv[1];
        }
    }
}

QS.prototype.add = function( name, value ) {
    if( arguments.length == 1 && arguments[0].constructor == Object ) {
        this.addMany( arguments[0] );
        return;
    }
    this.qs[name] = value;
}

QS.prototype.addMany = function( newValues ) {
    for( nv in newValues ) {
        this.qs[nv] = newValues[nv];
    }
}

QS.prototype.remove = function( name ) {
    if( arguments.length == 1 && arguments[0].constructor == Array ) {
        this.removeMany( arguments[0] );
        return;
    }
    delete this.qs[name];
}

QS.prototype.removeMany = function( deleteNames ) {
    var i;
    for( i = 0; i < deleteNames.length; i++ ) {
        delete this.qs[deleteNames[i]];
    }
}

QS.prototype.getQueryString = function() {
    var nv, q = [];
    for( nv in this.qs ) {
        q[q.length] = nv+'='+this.qs[nv];
    }
    return q.join( '&' );
}

QS.prototype.toString = QS.prototype.getQueryString;

//examples
//instantiation
var qs = new QS;
alert( qs );

//add a sinle name/value
qs.add( 'new', 'true' );
alert( qs );

//add multiple key/values
qs.add( { x: 'X', y: 'Y' } );
alert( qs );

//remove single key
qs.remove( 'new' )
alert( qs );

//remove multiple keys
qs.remove( ['x', 'bogus'] )
alert( qs );

Я переопределил метод toString, поэтому нет необходимости вызывать QS :: getQueryString, вы можете использовать QS :: toString или, как я делал в примерах, просто полагаться на объект, приведенный в строку.

Answer 8

Если у вас есть строка с URL, которую вы хотите украсить параметром, вы можете попробовать это:

urlstring += ( urlstring.match( /[\?]/g ) ? '&' : '?' ) + 'param=value';

Это означает, что ? будет префиксом параметра, но если у вас уже есть ? в urlstring, чем & будет префиксом.

Я бы также порекомендовал сделать encodeURI( paramvariable ), если вы не указали жестко закодированный параметр, но он находится внутри paramvariable; или если у вас есть забавные персонажи в нем.

См. Кодировка URL javascript для использования функции encodeURI.

Answer 9

Иногда, когда мы видим ? в конце URL, я нашел несколько решений, которые генерируют результаты как file.php?&foo=bar. я придумал, что мое собственное решение работает идеально, как я хочу!

location.origin + location.pathname + location.search + (location.search=='' ? '?' : '&') + 'lang=ar'

Примечание: location.origin не работает в IE, вот его исправление .

Answer 10

Это простой способ добавить параметр запроса:

const query = new URLSearchParams(window.location.search);
query.append("enabled", "true");

И это все больше здесь .

Обратите внимание на спецификации поддержки .