Làm cách nào để xóa tham số chuỗi truy vấn trong JavaScript?

Có cách nào tốt hơn để xóa một tham số khỏi chuỗi truy vấn trong chuỗi URL trong JavaScript tiêu chuẩn ngoài cách sử dụng biểu thức chính quy không?

Đây là những gì tôi đã nghĩ ra cho đến nay dường như hoạt động trong các thử nghiệm của tôi, nhưng tôi không muốn phát minh lại phân tích cú pháp chuỗi truy vấn!

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 + "=[^&;]+"

Có vẻ nguy hiểm vì tham số 'bar' sẽ khớp:

?a=b&foobar=c

Ngoài ra, nó sẽ thất bại nếu parameterchứa bất kỳ ký tự nào đặc biệt trong RegExp, chẳng hạn như '.'. Và nó không phải là một regex toàn cầu, vì vậy nó sẽ chỉ loại bỏ một thể hiện của tham số.

Tôi sẽ không sử dụng RegExp đơn giản cho việc này, tôi sẽ phân tích các tham số trong đó và mất các tham số bạn không muốn.

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

Các trình duyệt hiện đại cung cấp URLSearchParamsgiao diện để làm việc với các thông số tìm kiếm. Mà có deletephương pháp loại bỏ param theo tên.

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

Sao chép từ câu trả lời bobince, nhưng làm cho nó hỗ trợ các dấu hỏi trong chuỗi truy vấn, ví dụ:

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

Có hợp lệ để có nhiều hơn một dấu hỏi trong một URL không?

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

Tôi không thấy các vấn đề lớn với một giải pháp regex. Nhưng, đừng quên giữ lại định danh phân đoạn (văn bản sau# ).

Đây là giải pháp của tôi:

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

Và theo quan điểm của bobince, có - bạn cần thoát các .ký tự trong tên tham số.

Bạn có thể thay đổi URL bằng:

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

bằng cách này, bạn có thể ghi đè URL mà không cần tham số tìm kiếm, tôi sử dụng nó để xóa URL sau khi lấy tham số GET.

Bất cứ ai quan tâm đến một giải pháp regex tôi đã kết hợp chức năng này để thêm / xóa / cập nhật một tham số chuỗi truy vấn. Không cung cấp một giá trị sẽ loại bỏ tham số, cung cấp một giá trị sẽ thêm / cập nhật tham số. Nếu không có URL nào được cung cấp, nó sẽ được lấy từ window.location. Giải pháp này cũng xem xét neo của 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;
    }
}

CẬP NHẬT

Có một lỗi khi xóa tham số đầu tiên trong chuỗi truy vấn, tôi đã làm lại regex và kiểm tra để bao gồm một sửa chữa.

CẬP NHẬT 2

@schellmax cập nhật để khắc phục tình trạng mất biểu tượng hashtag khi xóa biến chuỗi truy vấn trực tiếp trước khi hashtag

Giả sử bạn muốn xóa tham số key = val khỏi URI:

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

Đây là những gì tôi đang sử dụng:

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

URL gốc: http://www.example.com/test/hello?id=123&foo=bar
URL đích: http://www.example.com/test/hello

Đây là một chức năng hoàn chỉnh để thêm và xóa tham số dựa trên câu hỏi này và ý chính của github này: 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);
};

Bạn có thể thêm các tham số như thế này:

updateQueryStringParam( 'myparam', 'true' );

Và loại bỏ nó như thế này:

updateQueryStringParam( 'myparam', null );

Trong chủ đề này, nhiều người nói rằng regex có lẽ không phải là giải pháp tốt nhất / ổn định ... vì vậy tôi không chắc chắn 100% nếu điều này có một số sai sót nhưng theo như tôi đã thử thì nó hoạt động khá tốt.

Đây là phiên bản xóa tham số truy vấn với lớp URL cho các trình duyệt hiện nay:

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

URLSearchParams không được hỗ trợ trên các trình duyệt cũ

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

IE, Edge (dưới 17) và Safari (dưới 10.3) không hỗ trợ URLSearchParams bên trong lớp URL.

Polyfill

URLSearchParams chỉ polyfill

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

Hoàn thành URL Polyfill và URLSearchParams để khớp với thông số kỹ thuật WHATWG cuối cùng

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

Sử dụng 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;
}

Phiên bản trên là một chức năng

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

Bạn nên sử dụng một thư viện để thực hiện thao tác URI vì nó phức tạp hơn bề ngoài để tự làm. Hãy xem: http://medialize.github.io/URI.js/

Từ những gì tôi có thể thấy, không ai ở trên có thể xử lý các tham số bình thường và tham số mảng. Đây là một trong đó.

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

Làm thế nào để sử dụng nó:

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

Tất nhiên, để cập nhật một tham số, chỉ cần loại bỏ sau đó thêm. Hãy làm cho một chức năng giả cho nó.

Tất cả các phản hồi về chủ đề này đều có một lỗ hổng ở chỗ chúng không bảo tồn các phần neo / đoạn của URL.

Vì vậy, nếu URL của bạn trông giống như:

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

và bạn thay thế 'tham số'

bạn sẽ mất văn bản mảnh của bạn.

Sau đây là sự thích nghi của các câu trả lời trước đó (bobince qua LukePH) giải quyết vấn đề này:

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

Đây là một giải pháp:

1. sử dụng URLSearchParams (không khó hiểu regex)
2. cập nhật URL trong thanh tìm kiếm mà không cần tải lại
3. duy trì tất cả các phần khác của URL (ví dụ: băm)
4. xóa bỏ phần thừa? trong chuỗi truy vấn nếu tham số cuối cùng bị xóa

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

Lưu ý: như được chỉ ra trong các câu trả lời khác URLSearchParams không được hỗ trợ trong IE , vì vậy hãy sử dụng một polyfill .

Nếu đó là một ví dụ URL, sử dụng deletechức năng củasearchParams

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

một câu trả lời trực tiếp và đơn giản hơn sẽ là

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

Một phiên bản sửa đổi của giải pháp bởi ssh_imov

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

Gọi như thế này

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

Điều này trả về URL với bất kỳ tham số nào:

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

Tôi thực tế đã viết hàm sau để xử lý các tham số url và lấy trạng thái cuối cùng dưới dạng chuỗi và chuyển hướng trang. Hy vọng nó có lợi.

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

Ví dụ: khi tôi nhấp vào nút, tôi muốn xóa giá trị trang và giá trị danh mục sẽ được thêm vào.

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

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

});

Tôi nghĩ rằng nó rất hữu ích!

Vui mừng bạn cuộn ở đây.

Tôi sẽ đề nghị bạn giải quyết nhiệm vụ này bằng các giải pháp có thể tiếp theo:

1. Bạn chỉ cần hỗ trợ các trình duyệt hiện đại (Edge> = 17) - sử dụng API URLSearchParams.delete () . Nó là bản địa và rõ ràng là cách thuận tiện nhất để giải quyết nhiệm vụ này.
2. Nếu đây không phải là một tùy chọn, bạn có thể muốn viết một hàm để làm điều này. Chức năng như vậy không
   • không thay đổi URL nếu không có tham số
   • xóa tham số URL không có giá trị, như http://google.com/?myparm
   • xóa tham số URL bằng một giá trị, như http://google.com/?myparm=1
   • xóa tham số URL nếu nó trong URL hai lần, như http://google.com?qp=1&qpqp=2&qp=1
   • Không sử dụng forvòng lặp và không sửa đổi mảng trong khi lặp qua nó
   • có nhiều chức năng
   • dễ đọc hơn các giải pháp regrec
   • Trước khi sử dụng, đảm bảo URL của bạn không được mã hóa

Hoạt động trong IE> 9 (phiên bản 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); 
}

Phiên bản ES6 ưa thích

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

Xem cách nó hoạt động ở đây

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())

Nếu bạn vào jQuery, có một plugin thao tác chuỗi truy vấn tốt:

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

    }
}