Hapus querystring dari URL

144

Apa cara mudah untuk menghapus querystring dari Path di Javascript? Saya telah melihat plugin untuk Jquery yang menggunakan window.location.search. Saya tidak bisa melakukan itu: URL dalam kasus saya adalah variabel yang ditetapkan dari AJAX.

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

Jawaban:

346

Cara mudah untuk mendapatkannya adalah:

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

Bagi mereka yang juga ingin menghapus hash (bukan bagian dari pertanyaan awal) ketika tidak ada querystring , itu memerlukan sedikit lebih banyak:

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

EDIT

@caub (awalnya @crl) menyarankan kombo yang lebih sederhana yang berfungsi untuk string kueri dan hash (meskipun menggunakan RegExp, kalau-kalau ada yang punya masalah dengan itu):

function getPathFromUrl(url) {
  return url.split(/[?#]/)[0];
}
Robusto
sumber
4
+1 ... Sebenarnya split () lebih baik daripada substring () dalam kasus ini.
Daniel Vassallo
10
Optimasi marginal jika itu penting (mungkin tidak): split('?', 1)[0].
bobince
@ChristianVielma: Ini ?adalah string literal, bukan ekspresi reguler.
Robusto
@ Ragusto Saya minta maaf, salah saya ... Saya sedang memeriksa di Jawa (yang menafsirkannya sebagai regex) :(
Christian Vielma
4
Hai Robusto, dan mengapa tidak .split(/[?#]/)[0]?
caub
32

Pembaruan ke-2: Dalam upaya memberikan jawaban yang komprehensif, saya membuat tolok ukur tiga metode yang diusulkan dalam berbagai jawaban.

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

Hasil di Firefox 3.5.8 pada Mac OS X 10.6.2:

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

Hasil di Chrome 5.0.307.11 di Mac OS X 10.6.2:

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

Perhatikan bahwa metode substring lebih rendah fungsinya karena mengembalikan string kosong jika URL tidak berisi querystring. Dua metode lainnya akan mengembalikan URL lengkap, seperti yang diharapkan. Namun menarik untuk dicatat bahwa metode substring adalah yang tercepat, terutama di Firefox.


PEMBARUAN 1: Sebenarnya metode split () yang disarankan oleh Robusto adalah solusi yang lebih baik dari yang saya sarankan sebelumnya, karena metode ini akan berfungsi bahkan ketika tidak ada querystring:

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"

Jawaban asli:

var testURL = '/Products/List?SortDirection=dsc&Sort=price&Page=3&Page2=3';
testURL.substring(0, testURL.indexOf('?'));    // Returns: "/Products/List"
Daniel Vassallo
sumber
10
O_O Memang sangat komprehensif, tapi ... mengapa? Metode yang paling fleksibel dan tepat jelas menang, kecepatan sama sekali tidak menjadi perhatian di sini.
tipuan
1
@menerima: Hanya untuk rasa ingin tahu ... Dan karena ada argumen tentang kinerja metode regex di komentar jawaban Angus.
Daniel Vassallo
6
Sangat menarik, Daniel. Dan jika saya harus melakukan parses URL 10K pada halaman saya akan mencari pekerjaan lain. :)
Robusto
Saya sebenarnya agak terkejut bahwa seseorang dapat melakukan 10k pertandingan regex dalam 44ms. Di masa depan, saya pikir saya akan cenderung menggunakannya lebih banyak.
TheGerm
12

Ini mungkin pertanyaan lama, tetapi saya telah mencoba metode ini untuk menghapus permintaan params. Tampaknya berfungsi dengan baik untuk saya karena saya perlu memuat ulang juga dikombinasikan dengan menghapus params permintaan.

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

Juga karena saya menggunakan operasi penambahan string sederhana, saya kira kinerjanya akan baik. Namun Masih layak dibandingkan dengan cuplikan dalam jawaban ini

damitj07
sumber
3

Cara sederhana adalah Anda bisa melakukan sebagai berikut

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

Jika Anda ke RegEx ....

var newURL = testURL.match(new RegExp("[^?]+"))
tukang plodder
sumber
1
regexp lambat satu - pergi dengan cara cepat dan mudah.
Aristos
1
@ Angus: Lingkaran Anda memberi Anda "Sebuah skrip mungkin sibuk ..." karena Anda lupa kenaikan a++;. Memperbaiki tes, di Firefox 3.6 saya pada iMac 2.93Ghz Core 2 Duo, saya mendapatkan 8ms untuk RegEx, dan 3ms untuk metode split ... Namun +1 untuk jawaban, karena masih pilihan lain.
Daniel Vassallo
1
terima kasih - saya memperbaikinya beberapa menit yang lalu! - tetapi intinya adalah ketika Anda berbicara 0,000005 detik bahkan untuk operasi reg exp, kinerja tidak menjadi masalah untuk solusi apa pun :-)
plodder
1
match()mengembalikan objek. Anda mungkin tidak menginginkan itu. Sebut toString()saja (atau +'').
bobince
1
Bob - tangkapan yang bagus. Sebenarnya ia mengembalikan array yang cocok - sebuah array string dalam hal ini. Jadi testURL.match (RegExp baru ("[^?] +")) [0] melakukannya
plodder
2
var path = "path/to/myfile.png?foo=bar#hash";

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

Jika menggunakan backbone.js (yang berisi url anchorrute), url query stringdapat muncul:

  1. sebelum url anchor:

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

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

Larutan:

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

Suatu pendekatan menggunakan standar 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
golopot
sumber
@ Bob apa masalah protokol ketika semua yang dia lakukan adalah mengembalikan pathname sesudahnya?
The Fool
-3
(() => {
        '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();
        }
})();

Begitulah cara saya melakukannya, juga memiliki dukungan RegEx.

javascript-noob
sumber