ฉันจะลบพารามิเตอร์สตริงการสืบค้นใน JavaScript ได้อย่างไร

มีวิธีที่ดีกว่าในการลบพารามิเตอร์ออกจากสตริงการสืบค้นในสตริง URL ใน JavaScript มาตรฐานนอกเหนือจากการใช้นิพจน์ทั่วไปหรือไม่

นี่คือสิ่งที่ฉันคิดขึ้นมาซึ่งดูเหมือนจะใช้ได้ในการทดสอบของฉัน แต่ฉันไม่ชอบที่จะสร้างการแยกวิเคราะห์สตริงการสืบค้นใหม่!

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" จะตรงกัน:

?a=b&foobar=c

นอกจากนี้จะล้มเหลวหากparameterมีอักขระใด ๆ ที่พิเศษใน RegExp เช่น "." และไม่ใช่ regex ส่วนกลางดังนั้นจะลบพารามิเตอร์เพียงหนึ่งอินสแตนซ์

ฉันจะไม่ใช้ RegExp แบบธรรมดาสำหรับสิ่งนี้ฉันจะแยกวิเคราะห์พารามิเตอร์และสูญเสียพารามิเตอร์ที่คุณไม่ต้องการ

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;
}

เบราว์เซอร์สมัยใหม่มีURLSearchParamsอินเทอร์เฟซสำหรับทำงานกับพารามิเตอร์การค้นหา ซึ่งมีdeleteเมธอดที่ลบพารามิเตอร์ตามชื่อ

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 แต่ทำให้มันรองรับเครื่องหมายคำถามในสตริงข้อความค้นหาเช่น

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

มีเครื่องหมายคำถามมากกว่าหนึ่งรายการใน URL หรือไม่

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;
}

ฉันไม่เห็นปัญหาหลักเกี่ยวกับโซลูชัน regex แต่อย่าลืมเก็บรักษาตัวระบุส่วน (ข้อความหลัง#)

นี่คือวิธีแก้ปัญหาของฉัน:

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

และในประเด็นของ Bobince ใช่ - คุณต้องหลีกเลี่ยง.อักขระในชื่อพารามิเตอร์

คุณสามารถเปลี่ยน URL โดยใช้:

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

ด้วยวิธีนี้คุณสามารถเขียนทับ URL โดยไม่ต้องใช้พารามิเตอร์การค้นหาฉันใช้เพื่อล้าง URL หลังจากรับพารามิเตอร์ GET

ใครก็ตามที่สนใจในโซลูชัน regex ฉันได้รวบรวมฟังก์ชันนี้เพื่อเพิ่ม / ลบ / อัปเดตพารามิเตอร์สตริงการสืบค้น การไม่ใส่ค่าจะลบพารามิเตอร์ออกไปการจ่ายค่าพารามิเตอร์จะเพิ่ม / อัพเดตพารามิเตอร์ หากไม่มี URL จะถูกดึงมาจาก window.location โซลูชันนี้ยังคำนึงถึงจุดยึดของ url ด้วย

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;
    }
}

UPDATE

เกิดข้อผิดพลาดเมื่อลบพารามิเตอร์แรกในสตริงการสืบค้นฉันได้ปรับ regex ใหม่และทดสอบเพื่อรวมการแก้ไข

อัปเดต 2

อัปเดต @schellmax เพื่อแก้ไขสถานการณ์ที่สัญลักษณ์แฮชแท็กหายไปเมื่อลบตัวแปร querystring โดยตรงก่อนแฮชแท็ก

สมมติว่าคุณต้องการลบพารามิเตอร์ key = val จาก URI:

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

นี่คือสิ่งที่ฉันใช้:

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

URL เดิม: http://www.example.com/test/hello?id=123&foo=bar
URL ปลายทาง: http://www.example.com/test/hello

นี่คือฟังก์ชั่นที่สมบูรณ์สำหรับการเพิ่มและลบพารามิเตอร์ตามคำถามนี้และส่วนสำคัญ Github นี้: 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);
};

คุณสามารถเพิ่มพารามิเตอร์ดังนี้:

updateQueryStringParam( 'myparam', 'true' );

และลบออกดังนี้:

updateQueryStringParam( 'myparam', null );

ในหัวข้อนี้หลายคนบอกว่า regex อาจไม่ใช่วิธีแก้ปัญหาที่ดีที่สุด / เสถียร ... ดังนั้นฉันจึงไม่แน่ใจ 100% ว่าสิ่งนี้มีข้อบกพร่องหรือไม่ แต่เท่าที่ฉันทดสอบมันก็ใช้ได้ดี

นี่คือพารามิเตอร์การค้นหาลบเวอร์ชันที่สะอาดพร้อมคลาส URLสำหรับเบราว์เซอร์วันนี้:

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

URLSearchParams ไม่รองรับในเบราว์เซอร์เก่า

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

IE, Edge (ต่ำกว่า 17) และ Safari (ต่ำกว่า 10.3) ไม่รองรับ URLSearchParams ภายในคลาส URL

Polyfills

URLSearchParams เท่านั้น polyfill

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

กรอก URL ของ Polyfill และ URLSearchParams ให้ตรงกับข้อกำหนดล่าสุดของ WHATWG

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

ใช้ jQuery:

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;
}

เวอร์ชันข้างต้นเป็นฟังก์ชัน

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;
}

คุณควรใช้ไลบรารีเพื่อจัดการ URI เนื่องจากมีความซับซ้อนมากกว่าที่จะทำด้วยตัวเองบนพื้นผิว ดูที่: http://medialize.github.io/URI.js/

จากสิ่งที่ฉันเห็นไม่มีข้อใดข้างต้นสามารถจัดการกับพารามิเตอร์ปกติและพารามิเตอร์อาร์เรย์ได้ นี่คือสิ่งที่ทำ

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;
    }
}

วิธีใช้:

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

แน่นอนในการอัปเดตพารามิเตอร์เพียงแค่ลบแล้วเพิ่ม อย่าลังเลที่จะสร้างฟังก์ชันจำลองสำหรับมัน

การตอบกลับทั้งหมดในเธรดนี้มีข้อบกพร่องตรงที่ไม่เก็บส่วน anchor / fragment ของ URL ไว้

ดังนั้นหาก URL ของคุณมีลักษณะดังนี้:

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

และคุณแทนที่ 'พารามิเตอร์'

คุณจะสูญเสียข้อความส่วนย่อยของคุณ

ต่อไปนี้เป็นการปรับเปลี่ยนคำตอบก่อนหน้านี้ (bobince ผ่าน LukePH) ที่แก้ไขปัญหานี้:

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;
}

นี่คือวิธีแก้ปัญหาที่:

1. ใช้URLSearchParams (ไม่ยากที่จะเข้าใจ regex)
2. อัปเดต URLในแถบค้นหาโดยไม่ต้องโหลดซ้ำ
3. เก็บรักษาส่วนอื่น ๆ ทั้งหมดของ URL (เช่นแฮช)
4. ลบ superflous?ในสตริงการค้นหาหากพารามิเตอร์สุดท้ายถูกลบออก

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);
    }
}

หมายเหตุ:เป็นแหลมออกในคำตอบ URLSearchParams อื่น ๆไม่ได้รับการสนับสนุนใน IEเพื่อใช้polyfill

หากเป็นตัวอย่างURLให้ใช้deleteฟังก์ชันของsearchParams

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

อีกคำตอบที่ตรงและง่ายกว่าก็คือ

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

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

เรียกแบบนี้

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

สิ่งนี้จะส่งคืน URL โดยไม่มีพารามิเตอร์ GET ใด ๆ :

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 และรับสถานะสุดท้ายเป็นสตริงและเปลี่ยนเส้นทางเพจ หวังว่าจะเป็นประโยชน์

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 '';
}

ตัวอย่างเช่นเมื่อฉันคลิกปุ่มฉันต้องการให้ลบค่าหน้าและเพิ่มค่าหมวดหมู่

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

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

});

ฉันคิดว่ามันมีประโยชน์มาก!

ดีใจที่คุณเลื่อนมาที่นี่

ฉันขอแนะนำให้คุณแก้ไขงานนี้โดยแนวทางแก้ไขปัญหาถัดไป:

1. คุณต้องการที่จะสนับสนุนเบราว์เซอร์ที่ทันสมัยเท่านั้น (ขอบ> = 17) - การใช้URLSearchParams.delete () API มันเป็นแบบดั้งเดิมและเห็นได้ชัดว่าเป็นวิธีที่สะดวกที่สุดในการแก้ปัญหานี้
2. หากนี่ไม่ใช่ตัวเลือกคุณอาจต้องเขียนฟังก์ชันเพื่อดำเนินการนี้ ฟังก์ชั่นดังกล่าวทำ
   • อย่าเปลี่ยน URL หากไม่มีพารามิเตอร์
   • ลบพารามิเตอร์ URL โดยไม่มีค่าเช่น http://google.com/?myparm
   • ลบพารามิเตอร์ URL ด้วยค่าเช่น http://google.com/?myparm=1
   • ลบพารามิเตอร์ URL หากอยู่ใน URL สองครั้งเช่น http://google.com?qp=1&qpqp=2&qp=1
   • ไม่ใช้forลูปและไม่แก้ไขอาร์เรย์ระหว่างการวนซ้ำ
   • มีประโยชน์มากขึ้น
   • อ่านได้ง่ายกว่าโซลูชัน regexp
   • ก่อนใช้ตรวจสอบให้แน่ใจว่า URL ของคุณไม่ได้เข้ารหัส

ทำงานใน IE> 9 (เวอร์ชัน ES5)

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); 
}

รุ่นแฟนซี ES6

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}`}`;  
}

ดูวิธีการทำงานที่นี่

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 มีปลั๊กอินการจัดการสตริงข้อความค้นหาที่ดี:

• 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, '');

    }
}