Estoy usando history.pushStatepara agregar algunos parámetros a la URL de la página actual después de hacer una llamada AJAX en mi página. Ahora, en la misma página según la acción del usuario, quiero actualizar la URL de la página nuevamente con el mismo conjunto de parámetros o con uno adicional. Así que mi código se ve así:

var pageUrl = window.location.href + "?" + queryString;
window.history.pushState('','',pageUrl);

queryString es mi lista de parámetros de consulta.

Pero con el código anterior, mis parámetros se agregan a la URL con los parámetros y se ven a continuación después de la segunda llamada AJAX:

http://sample.com?param1=foo¶m2=bar¶m1=foo,foo1¶m2=bar¶m3=another_foo

Entonces, los parámetros aparecen dos veces en la URL, ¿hay alguna forma de reemplazar los parámetros en la URL antes de pasar a Historial o alguna otra forma mejor de lograr esto en javascript (jquery)?

respuesta

Creo que lo que necesitas es quitar window.location.hrefy dejar '?' +.

var pageUrl = '?' + queryString;
window.history.pushState('', '', pageUrl);

Esta función podría ser útil

function updateUrlParameter(param, value) {
    const regExp = new RegExp(param + "(.+?)(&|$)", "g");
    const newUrl = window.location.href.replace(regExp, param + "=" + value + "$2");
    window.history.pushState("", "", newUrl);
}

Editar : la siguiente solución es más simple y también funciona si el parámetro aún no forma parte de la URL. Sin embargo, no es compatible con Internet Explorer (¿no lo dices?).

function setQueryStringParameter(name, value) {
    const params = new URLSearchParams(window.location.search);
    params.set(name, value);
    window.history.replaceState({}, "", decodeURIComponent(`${window.location.pathname}?${params}`));
}

Hola , para mantener la última parte de la URL y simplemente jugar con los parámetros , puedes crear un nuevo objeto URL así:

// e.g url: sample.com/testpage/test

var url = new URL(window.location);
url.searchParams.set('foo', 'bar');
window.history.pushState({}, '', url);

// outcome: sample.com/testpage/test?foo=bar

// you can remove, just the param part, like so:
url.searchParams.delete('foo');

Administrar parámetros de consulta en la URL actual

Esta función es similar a las otras respuestas, pero sin usar RegExp y concatenaciones de cadenas.

Argumentos:

  • nombre: nombre de cadena del parámetro de consulta.
  • valor - valor de cadena del parámetro.
  • append - si es verdadero: esta función siempre agrega un nuevo parámetro. Esto es muy útil cuando necesita agregar dos parámetros con el mismo nombre, por ejemplo: localhost:8080/some_page?foo=100500&foo=ABC. De lo contrario, el parámetro se cambiará (o se agregará si está ausente).
function setQueryStringParameter(name, value, append=false) {
    const url = new URL(window.document.URL);
    if (append) url.searchParams.append(name, value);
    else url.searchParams.set(name, value);
    window.history.replaceState(null, "", url.toString());
}