Xóa chuỗi truy vấn khỏi URL

Cách dễ dàng để xóa chuỗi truy vấn khỏi Đường dẫn trong Javascript là gì? Tôi đã thấy một plugin cho Jquery sử dụng window.location.search. Tôi không thể làm điều đó: URL trong trường hợp của tôi là một biến được đặt từ AJAX.

var testURL = '/Products/List?SortDirection=dsc&Sort=price&Page=3&Page2=3&SortOrder=dsc'

Một cách dễ dàng để có được điều này là:

function getPathFromUrl(url) {
  return url.split("?")[0];
}

Đối với những người cũng muốn xóa hàm băm (không phải là một phần của câu hỏi ban đầu) khi không có chuỗi truy vấn nào tồn tại , điều đó đòi hỏi thêm một chút:

function stripQueryStringAndHashFromPath(url) {
  return url.split("?")[0].split("#")[0];
}

BIÊN TẬP

@caub (ban đầu @crl) đã đề xuất một kết hợp đơn giản hơn, hoạt động cho cả chuỗi truy vấn và hàm băm (mặc dù nó sử dụng RegExp, trong trường hợp bất kỳ ai cũng gặp vấn đề với điều đó):

function getPathFromUrl(url) {
  return url.split(/[?#]/)[0];
}

Cập nhật lần 2: Trong nỗ lực cung cấp câu trả lời toàn diện, tôi đang điểm chuẩn ba phương pháp được đề xuất trong các câu trả lời khác nhau.

var testURL = '/Products/List?SortDirection=dsc&Sort=price&Page=3&Page2=3';
var i;

// Testing the substring method
i = 0;
console.time('10k substring');
while (i < 10000) {
    testURL.substring(0, testURL.indexOf('?'));
    i++;
}
console.timeEnd('10k substring');

// Testing the split method
i = 0;
console.time('10k split');
while (i < 10000) {
    testURL.split('?')[0]; 
    i++;
}
console.timeEnd('10k split');

// Testing the RegEx method
i = 0;
var re = new RegExp("[^?]+");
console.time('10k regex');
while (i < 10000) {
    testURL.match(re)[0]; 
    i++;
}
console.timeEnd('10k regex');

Kết quả trong Firefox 3.5.8 trên Mac OS X 10.6.2:

10k substring:  16ms
10k split:      25ms
10k regex:      44ms

Kết quả trong Chrome 5.0.307.11 trên Mac OS X 10.6.2:

10k substring:  14ms
10k split:      20ms
10k regex:      15ms

Lưu ý rằng phương thức chuỗi con kém hơn về chức năng vì nó trả về một chuỗi trống nếu URL không chứa chuỗi truy vấn. Hai phương thức khác sẽ trả về URL đầy đủ, như mong đợi. Tuy nhiên, thật thú vị khi lưu ý rằng phương thức chuỗi con là nhanh nhất, đặc biệt là trong Firefox.

CẬP NHẬT thứ 1: Trên thực tế phương thức split () được đề xuất bởi Robusto là một giải pháp tốt hơn mà tôi đã đề xuất trước đó, vì nó sẽ hoạt động ngay cả khi không có chuỗi truy vấn:

var testURL = '/Products/List?SortDirection=dsc&Sort=price&Page=3&Page2=3';
testURL.split('?')[0];    // Returns: "/Products/List"

var testURL2 = '/Products/List';
testURL2.split('?')[0];    // Returns: "/Products/List"

Câu trả lời gốc:

var testURL = '/Products/List?SortDirection=dsc&Sort=price&Page=3&Page2=3';
testURL.substring(0, testURL.indexOf('?'));    // Returns: "/Products/List"

Đây có thể là một câu hỏi cũ nhưng tôi đã thử phương pháp này để xóa tham số truy vấn. Có vẻ như hoạt động trơn tru đối với tôi vì tôi cần tải lại kết hợp với loại bỏ các tham số truy vấn.

window.location.href = window.location.origin + window.location.pathname;

Ngoài ra vì tôi đang sử dụng thao tác thêm chuỗi đơn giản nên tôi đoán hiệu suất sẽ tốt. Nhưng vẫn đáng so sánh với đoạn trích trong câu trả lời này

Một cách đơn giản là bạn có thể làm như sau

public static String stripQueryStringAndHashFromPath(String uri) {
 return uri.replaceAll(("(\\?.*|\\#.*)"), "");
}

Nếu bạn vào RegEx ....

var newURL = testURL.match(new RegExp("[^?]+"))

var path = "path/to/myfile.png?foo=bar#hash";

console.log(
    path.replace(/(\?.*)|(#.*)/g, "")
);

Nếu sử dụng backbone.js (chứa url anchortuyến đường), url query stringcó thể xuất hiện:

1. trước url anchor:

   var url = 'http://example.com?a=1&b=3#routepath/subpath';

2. sau url anchor:

   var url = 'http://example.com#routepath/subpath?a=1&b=3';

Giải pháp:

window.location.href.replace(window.location.search, '');
// run as: 'http://example.com#routepath/subpath?a=1&b=3'.replace('?a=1&b=3', '');

Một cách tiếp cận sử dụng tiêu chuẩn URL:

/**
 * @param {string} path - A path starting with "/"
 * @return {string}
 */
function getPathname(path) {
  return new URL(`http://_${path}`).pathname
}

getPathname('/foo/bar?cat=5') // /foo/bar

Nếu bạn cần thực hiện thao tác phức tạp trên URL, bạn có thể xem qua plugin trình phân tích cú pháp url của jQuery .

(() => {
        'use strict';
        const needle = 'SortOrder|Page'; // example
        if ( needle === '' || needle === '{{1}}' ) { 
            return; 
        }           
        const needles = needle.split(/\s*\|\s*/);
        const querystripper = ev => {
                    if (ev) { window.removeEventListener(ev.type, querystripper, true);}
                    try {
                          const url = new URL(location.href);
                          const params = new URLSearchParams(url.search.slice(1));
                          for (const needleremover of needles) {
                                if (params.has(needleremover)) {
                                url.searchParams.delete(needleremover);
                                    window.location.href = url;
                            }
                          }     
                    } catch (ex) { }
        };          
        if (document.readyState === 'loading') {
                 window.addEventListener('DOMContentLoaded', querystripper, true);
        } else {
                 querystripper();
        }
})();

Đó là cách tôi đã làm, cũng có hỗ trợ RegEx.