JavaScript'te bir sorgu dizesi parametresini nasıl silebilirim?

Standart JavaScript'te bir URL dizesindeki bir sorgu dizesindeki bir parametreyi silmenin normal ifade kullanmaktan daha iyi bir yolu var mı?

Testlerimde işe yarıyor gibi görünen şu ana kadar bulduğum şey şudur, ancak sorgu dizesini ayrıştırmayı yeniden icat etmeyi sevmiyorum!

function RemoveParameterFromUrl( url, parameter ) {

    if( typeof parameter == "undefined" || parameter == null || parameter == "" ) throw new Error( "parameter is required" );

    url = url.replace( new RegExp( "\\b" + parameter + "=[^&;]+[&;]?", "gi" ), "" ); "$1" );

    // remove any leftover crud
    url = url.replace( /[&;]$/, "" );

    return url;
}

"[&;]?" + parameter + "=[^&;]+"

"Bar" parametresi aşağıdakilerle eşleşeceği için tehlikeli görünüyor:

?a=b&foobar=c

Ayrıca, parameterRegExp'te '.' Gibi özel karakterler içeriyorsa başarısız olur . Ve bu genel bir normal ifade değildir, bu nedenle parametrenin yalnızca bir örneğini kaldırır.

Bunun için basit bir RegExp kullanmazdım, içindeki parametreleri ayrıştırır ve istemediklerinizi kaybederim.

function removeURLParameter(url, parameter) {
    //prefer to use l.search if you have a location/link object
    var urlparts = url.split('?');   
    if (urlparts.length >= 2) {

        var prefix = encodeURIComponent(parameter) + '=';
        var pars = urlparts[1].split(/[&;]/g);

        //reverse iteration as may be destructive
        for (var i = pars.length; i-- > 0;) {    
            //idiom for string.startsWith
            if (pars[i].lastIndexOf(prefix, 0) !== -1) {  
                pars.splice(i, 1);
            }
        }

        return urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : '');
    }
    return url;
}

Modern tarayıcılarURLSearchParams , arama parametreleriyle çalışmak için arayüz sağlar. Sahiptir Hangi deleteyöntemi adıyla kaldırır param söyledi.

if (typeof URLSearchParams !== 'undefined') {
  const params = new URLSearchParams('param1=1&param2=2&param3=3')
  
  console.log(params.toString())
  
  params.delete('param2')
  
  console.log(params.toString())

} else {
  console.log(`Your browser ${navigator.appVersion} does not support URLSearchParams`)
}

Bobince yanıtından kopyalandı, ancak sorgu dizesindeki soru işaretlerini destekledi, ör.

http://www.google.com/search?q=test???+something&aq=f

Bir URL'de birden fazla soru işareti olması geçerli midir?

function removeUrlParameter(url, parameter) {
  var urlParts = url.split('?');

  if (urlParts.length >= 2) {
    // Get first part, and remove from array
    var urlBase = urlParts.shift();

    // Join it back up
    var queryString = urlParts.join('?');

    var prefix = encodeURIComponent(parameter) + '=';
    var parts = queryString.split(/[&;]/g);

    // Reverse iteration as may be destructive
    for (var i = parts.length; i-- > 0; ) {
      // Idiom for string.startsWith
      if (parts[i].lastIndexOf(prefix, 0) !== -1) {
        parts.splice(i, 1);
      }
    }

    url = urlBase + '?' + parts.join('&');
  }

  return url;
}

Bir normal ifade çözümüyle ilgili büyük sorunlar görmüyorum. Ancak, parça tanımlayıcısını (metinden sonra #) korumayı unutmayın .

İşte benim çözümüm:

function RemoveParameterFromUrl(url, parameter) {
  return url
    .replace(new RegExp('[?&]' + parameter + '=[^&#]*(#.*)?$'), '$1')
    .replace(new RegExp('([?&])' + parameter + '=[^&]*&'), '$1');
}

Ve Bobince'ye göre, evet - .parametre isimlerindeki karakterlerden kaçınmanız gerekir .

URL'yi şu şekilde değiştirebilirsiniz:

window.history.pushState({}, document.title, window.location.pathname);

bu şekilde, arama parametresi olmadan URL'nin üzerine yazabilirsiniz, GET parametrelerini aldıktan sonra URL'yi temizlemek için kullanıyorum.

Bir regex çözümüyle ilgilenen herkes, bir querystring parametresi eklemek / kaldırmak / güncellemek için bu işlevi bir araya getirdim. Bir değerin sağlanmaması parametreyi kaldırır, bir değerin sağlanması parametreyi ekler / günceller. URL sağlanmadıysa, window.location'dan alınacaktır. Bu çözüm aynı zamanda url'nin bağlantısını da dikkate alır.

function UpdateQueryString(key, value, url) {
    if (!url) url = window.location.href;
    var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),
        hash;

    if (re.test(url)) {
        if (typeof value !== 'undefined' && value !== null)
            return url.replace(re, '$1' + key + "=" + value + '$2$3');
        else {
            hash = url.split('#');
            url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
            if (typeof hash[1] !== 'undefined' && hash[1] !== null) 
                url += '#' + hash[1];
            return url;
        }
    }
    else {
        if (typeof value !== 'undefined' && value !== null) {
            var separator = url.indexOf('?') !== -1 ? '&' : '?';
            hash = url.split('#');
            url = hash[0] + separator + key + '=' + value;
            if (typeof hash[1] !== 'undefined' && hash[1] !== null) 
                url += '#' + hash[1];
            return url;
        }
        else
            return url;
    }
}

GÜNCELLEME

Sorgu dizesindeki ilk parametreyi kaldırırken bir hata oluştu, regex üzerinde yeniden çalıştım ve bir düzeltme eklemek için test ettim.

GÜNCELLEME 2

@schellmax, bir hashtag'den hemen önce bir sorgu dizesi değişkenini kaldırırken hashtag sembolünün kaybolduğu durumu düzeltmek için

URI'den key = val parametresini kaldırmak istediğinizi varsayarsak:

function removeParam(uri) {
   return uri.replace(/([&\?]key=val*$|key=val&|[?&]key=val(?=#))/, '');
}

İşte kullandığım şey:

if (location.href.includes('?')) { 
    history.pushState({}, null, location.href.split('?')[0]); 
}

Orijinal URL: http://www.example.com/test/hello?id=123&foo=bar
Hedef URL: http://www.example.com/test/hello

Bu soruya ve şu github özüne dayalı olarak parametre eklemek ve kaldırmak için eksiksiz bir işlev var: https://gist.github.com/excalq/2961415

var updateQueryStringParam = function (key, value) {

    var baseUrl = [location.protocol, '//', location.host, location.pathname].join(''),
        urlQueryString = document.location.search,
        newParam = key + '=' + value,
        params = '?' + newParam;

    // If the "search" string exists, then build params from it
    if (urlQueryString) {

        updateRegex = new RegExp('([\?&])' + key + '[^&]*');
        removeRegex = new RegExp('([\?&])' + key + '=[^&;]+[&;]?');

        if( typeof value == 'undefined' || value == null || value == '' ) { // Remove param if value is empty

            params = urlQueryString.replace(removeRegex, "$1");
            params = params.replace( /[&;]$/, "" );

        } else if (urlQueryString.match(updateRegex) !== null) { // If param exists already, update it

            params = urlQueryString.replace(updateRegex, "$1" + newParam);

        } else { // Otherwise, add it to end of query string

            params = urlQueryString + '&' + newParam;

        }

    }
    window.history.replaceState({}, "", baseUrl + params);
};

Bunun gibi parametreler ekleyebilirsiniz:

updateQueryStringParam( 'myparam', 'true' );

Ve şu şekilde kaldırın:

updateQueryStringParam( 'myparam', null );

Bu ileti dizisinde birçok kişi, normal ifadenin muhtemelen en iyi / kararlı çözüm olmadığını söyledi ... bu yüzden bu şeyin bazı kusurları olup olmadığından% 100 emin değilim, ancak test ettiğim kadarıyla oldukça iyi çalışıyor.

Bu temiz bir versiyonudur kaldır sorgu parametresi ile URL sınıfının bugün tarayıcılar için:

function removeUrlParameter(url, paramKey)
{
  var r = new URL(url);
  r.searchParams.delete(paramKey);
  return r.href;
}

URLSearchParams eski tarayıcılarda desteklenmiyor

https://caniuse.com/#feat=urlsearchparams

IE, Edge (17'nin altında) ve Safari (10.3'ün altında) URL sınıfı içinde URLSearchParams'ı desteklemez.

Polyfills

URLSearchParams yalnızca çoklu doldurma

https://github.com/WebReflection/url-search-params

Polyfill URL'sini ve URLSearchParams'ı son WHATWG spesifikasyonlarıyla eşleşecek şekilde tamamlayın

https://github.com/lifaon74/url-polyfill

JQuery kullanarak:

function removeParam(key) {
    var url = document.location.href;
    var params = url.split('?');
    if (params.length == 1) return;

    url = params[0] + '?';
    params = params[1];
    params = params.split('&');

    $.each(params, function (index, value) {
        var v = value.split('=');
        if (v[0] != key) url += value + '&';
    });

    url = url.replace(/&$/, '');
    url = url.replace(/\?$/, '');

    document.location.href = url;
}

İşlev olarak yukarıdaki sürüm

function removeURLParam(url, param)
{
 var urlparts= url.split('?');
 if (urlparts.length>=2)
 {
  var prefix= encodeURIComponent(param)+'=';
  var pars= urlparts[1].split(/[&;]/g);
  for (var i=pars.length; i-- > 0;)
   if (pars[i].indexOf(prefix, 0)==0)
    pars.splice(i, 1);
  if (pars.length > 0)
   return urlparts[0]+'?'+pars.join('&');
  else
   return urlparts[0];
 }
 else
  return url;
}

Kendiniz yapmak için yüzeyde göründüğünden daha karmaşık olduğundan, URI manipülasyonu yapmak için bir kitaplık kullanmalısınız. Bir göz atın: http://medialize.github.io/URI.js/

Gördüğüm kadarıyla, yukarıdakilerin hiçbiri normal parametreleri ve dizi parametrelerini işleyemez. İşte yapan biri.

function removeURLParameter(param, url) {
    url = decodeURI(url).split("?");
    path = url.length == 1 ? "" : url[1];
    path = path.replace(new RegExp("&?"+param+"\\[\\d*\\]=[\\w]+", "g"), "");
    path = path.replace(new RegExp("&?"+param+"=[\\w]+", "g"), "");
    path = path.replace(/^&/, "");
    return url[0] + (path.length
        ? "?" + path
        : "");
}

function addURLParameter(param, val, url) {
    if(typeof val === "object") {
        // recursively add in array structure
        if(val.length) {
            return addURLParameter(
                param + "[]",
                val.splice(-1, 1)[0],
                addURLParameter(param, val, url)
            )
        } else {
            return url;
        }
    } else {
        url = decodeURI(url).split("?");
        path = url.length == 1 ? "" : url[1];
        path += path.length
            ? "&"
            : "";
        path += decodeURI(param + "=" + val);
        return url[0] + "?" + path;
    }
}

Bu nasıl kullanılır:

url = location.href;
    -> http://example.com/?tags[]=single&tags[]=promo&sold=1

url = removeURLParameter("sold", url)
    -> http://example.com/?tags[]=single&tags[]=promo

url = removeURLParameter("tags", url)
    -> http://example.com/

url = addURLParameter("tags", ["single", "promo"], url)
    -> http://example.com/?tags[]=single&tags[]=promo

url = addURLParameter("sold", 1, url)
    -> http://example.com/?tags[]=single&tags[]=promo&sold=1

Tabii ki, bir parametreyi güncellemek için sadece kaldırıp ekleyin. Bunun için sahte bir işlev yapmaktan çekinmeyin.

Bu ileti dizisindeki tüm yanıtların, URL'lerin bağlantı / parça parçalarını korumamaları bakımından bir kusuru vardır.

Yani URL'niz şöyle görünüyorsa:

http://dns-entry/path?parameter=value#fragment-text

ve "parametre" yi değiştirirsiniz

parça metninizi kaybedeceksiniz.

Aşağıda, bu sorunu ele alan önceki cevapların uyarlanması (LukePH aracılığıyla bobince):

function removeParameter(url, parameter)
{
  var fragment = url.split('#');
  var urlparts= fragment[0].split('?');

  if (urlparts.length>=2)
  {
    var urlBase=urlparts.shift(); //get first part, and remove from array
    var queryString=urlparts.join("?"); //join it back up

    var prefix = encodeURIComponent(parameter)+'=';
    var pars = queryString.split(/[&;]/g);
    for (var i= pars.length; i-->0;) {               //reverse iteration as may be destructive
      if (pars[i].lastIndexOf(prefix, 0)!==-1) {   //idiom for string.startsWith
        pars.splice(i, 1);
      }
    }
    url = urlBase + (pars.length > 0 ? '?' + pars.join('&') : '');
    if (fragment[1]) {
      url += "#" + fragment[1];
    }
  }
  return url;
}

İşte bir çözüm:

1. URLSearchParams kullanır ( regex'i anlamak zor değil)
2. yeniden yüklemeden arama çubuğundaki URL'yi günceller
3. URL'nin diğer tüm kısımlarını korur (örn. karma)
4. ?son parametre kaldırıldıysa sorgu dizesindeki gereksizleri kaldırır

function removeParam(paramName) {
    let searchParams = new URLSearchParams(window.location.search);
    searchParams.delete(paramName);
    if (history.replaceState) {
        let searchString = searchParams.toString().length > 0 ? '?' + searchParams.toString() : '';
        let newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname +  searchString + window.location.hash;
        history.replaceState(null, '', newUrl);
    }
}

Not: Diğer yanıtlarda da belirtildiği gibi URLSearchParams, IE'de desteklenmemektedir , bu nedenle bir polyfill kullanın .

Bir örneğiyse URL, deleteişlevini kullanınsearchParams

let url = new URL(location.href);
url.searchParams.delete('page');

başka bir doğrudan ve daha basit cevap

let url = new URLSearchParams(location.search)
let key = 'some_key'

return url.has(key)
    ? location.href.replace(new RegExp(`[?&]${key}=${url.get(key)}`), '')
    : location.href

Ssh_imov tarafından değiştirilmiş bir çözüm sürümü

function removeParam(uri, keyValue) {
      var re = new RegExp("([&\?]"+ keyValue + "*$|" + keyValue + "&|[?&]" + keyValue + "(?=#))", "i"); 
      return uri.replace(re, '');
    }

Böyle ara

removeParam("http://google.com?q=123&q1=234&q2=567", "q1=234");
// returns http://google.com?q=123&q2=567

Bu, HERHANGİ BİR GET Parametresi olmadan URL'yi döndürür:

var href = document.location.href;
var search = document.location.search;
var pos = href.indexOf( search );
if ( pos !== -1 ){
    href = href.slice( 0, pos );
    console.log( href );
}

Url parametrelerini işlemek ve son durumu bir dize olarak almak ve sayfayı yeniden yönlendirmek için pratik olarak aşağıdaki işlevi yazdım. Umarım fayda sağlar.

function addRemoveUrlQuery(addParam = {}, removeParam = [], startQueryChar = '?'){

    let urlParams = new URLSearchParams(window.location.search);

    //Add param
    for(let i in addParam){
        if(urlParams.has(i)){ urlParams.set(i, addParam[i]); }
        else                { urlParams.append(i, addParam[i]); }
    }

    //Remove param
    for(let i of removeParam){
        if(urlParams.has(i)){
            urlParams.delete(i);
        }
    }

    if(urlParams.toString()){
        return startQueryChar + urlParams.toString();
    }

    return '';
}

Örneğin bir butona tıkladığımda sayfa değerinin silinmesini ve kategori değerinin eklenmesini istiyorum.

let button = document.getElementById('changeCategory');
button.addEventListener('click', function (e) {

    window.location = addRemoveUrlQuery({'category':'cars'}, ['page']);

});

Bence çok faydalı oldu!

Buraya kaydırmanıza sevindim.

Bu görevi sonraki olası çözümlerle çözmenizi öneririm:

1. Yalnızca modern tarayıcıları desteklemeniz gerekir (Edge> = 17) - URLSearchParams.delete () API kullanın . Yereldir ve açıkçası bu görevi çözmenin en uygun yoludur.
2. Bu bir seçenek değilse, bunu yapmak için bir işlev yazmak isteyebilirsiniz. Bu tür bir işlev yapar
   • bir parametre yoksa URL'yi değiştirmeyin
   • URL parametresini değer içermeyen kaldırmak gibi http://google.com/?myparm
   • gibi bir değere sahip URL parametresini kaldırın http://google.com/?myparm=1
   • URL'de iki kez bulunuyorsa URL parametresini kaldırın, örneğin http://google.com?qp=1&qpqp=2&qp=1
   • forDöngü kullanmaz ve üzerinde döngü sırasında diziyi değiştirmez
   • daha işlevsel
   • regexp çözümlerinden daha okunabilir
   • Kullanmadan önce URL'nizin kodlanmadığından emin olun

IE> 9'da çalışır (ES5 sürümü)

function removeParamFromUrl(url, param) {  // url: string, param: string
  var urlParts = url.split('?'),
      preservedQueryParams = '';

  if (urlParts.length === 2) {
    preservedQueryParams = urlParts[1]
      .split('&')
      .filter(function(queryParam) {
        return !(queryParam === param || queryParam.indexOf(param + '=') === 0)
      })
      .join('&');
  }

  return urlParts[0] +  (preservedQueryParams && '?' + preservedQueryParams); 
}

Fantezi ES6 versiyonu

function removeParamFromUrlEs6(url, param) {
  const [path, queryParams] = url.split('?');
	let preservedQueryParams = '';

  if (queryParams) {
    preservedQueryParams = queryParams
      .split('&')
      .filter(queryParam => !(queryParam === param || queryParam.startsWith(`${param}=`)))
      .join('&');
  }

  return `${path}${preservedQueryParams && `?${preservedQueryParams}`}`;  
}

Nasıl çalıştığını burada görün

function removeParamInAddressBar(parameter) {
    var url = document.location.href;
    var urlparts = url.split('?');

    if (urlparts.length >= 2) {
        var urlBase = urlparts.shift();
        var queryString = urlparts.join("?");

        var prefix = encodeURIComponent(parameter) + '=';
        var pars = queryString.split(/[&;]/g);
        for (var i = pars.length; i-- > 0;) {
            if (pars[i].lastIndexOf(prefix, 0) !== -1) {
                pars.splice(i, 1);
            }
        }

        if (pars.length == 0) {
            url = urlBase;
        } else {
            url = urlBase + '?' + pars.join('&');
        }

        window.history.pushState('', document.title, url); // push the new url in address bar
    }
    return url;
}

const params = new URLSearchParams(location.search)
params.delete('key_to_delete')
console.log(params.toString())

JQuery ile ilgileniyorsanız, iyi bir sorgu dizisi işleme eklentisi vardır:

• http://plugins.jquery.com/project/query-object

function removeQueryStringParameter(uri, key, value) 
{

var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");

    var separator = uri.indexOf('?') !== -1 ? "&" : "?";

    if (uri.match(re)) {

        return uri.replace(re, '');

    }
}