Видаліть запит із URL-адреси


145

Який простий спосіб видалити рядок запитів із Шляху в JavaScript? Я бачив плагін для Jquery, який використовує window.location.search. Я не можу цього зробити: URL-адреса в моєму випадку - це змінна, яка встановлюється з AJAX.

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

Відповіді:


347

Простий спосіб отримати це:

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

Для тих, хто також хоче видалити хеш (не частина початкового запитання), коли не існує запиту , потрібно трохи більше:

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

EDIT

@caub (спочатку @crl) запропонував більш простий комбо, який працює як для рядка запиту, так і для хеша (хоча він використовує RegExp, якщо у когось із цим проблеми):

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

4
+1 ... Фактично split () в цьому випадку краще, ніж substring ().
Даніель Вассалло

10
Маргінальний оптимізація , якщо це має значення (ймовірно , немає): split('?', 1)[0].
bobince

@ChristianVielma: Це ?рядковий буквальний, а не регулярний вираз.
Robusto

@Robusto Вибачте, мій поганий ... Я перевіряв це на Java (що тлумачить це як регулярний вираз) :(
Christian Vielma

4
Гей, Робусто, а чому ні .split(/[?#]/)[0]?
кают

32

2-е оновлення: Намагаючись надати вичерпну відповідь, я аналізую три методи, запропоновані в різних відповідях.

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

Результати в Firefox 3.5.8 на Mac OS X 10.6.2:

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

Результати в Chrome 5.0.307.11 на Mac OS X 10.6.2:

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

Зауважте, що метод підрядки поступається функціональним функціям, оскільки він повертає порожній рядок, якщо URL-адреса не містить рядка запиту. Інші два способи повернуть повну URL-адресу, як і очікувалося. Однак цікаво відзначити, що метод підрядки є найшвидшим, особливо у Firefox.


1-е ОНОВЛЕННЯ: Насправді метод split (), запропонований Robusto, є кращим рішенням, ніж той, який я запропонував раніше, оскільки він буде працювати навіть тоді, коли рядків запитів немає:

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"

Оригінальний відповідь:

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

10
O_O Дуже всебічно, але ... чому? Найбільш гнучкий і відповідний метод, очевидно, виграє, швидкість тут абсолютно не хвилює.
деге

1
@deceze: Просто для цікавості ... І тому, що в коментарях відповіді Ангеса був аргумент про ефективність методу регулярних виразів.
Даніель Вассалло

6
Дуже цікаво, Даніель. І якщо мені коли-небудь доведеться робити розбір URL-адрес 10K на сторінці, я буду шукати інший напрямок роботи. :)
Robusto

Я насправді трохи роздутий, що можна зробити 10-кратну гру з регексом за 44 мс. В майбутньому я думаю, що буду схильний більше їх використовувати.
TheGerm

12

Це може бути давнє питання, але я спробував цей метод видалити параметри запитів. Здається, для мене це працює безперебійно, оскільки мені потрібно було перезавантажитись, а також поєднатись із видаленням параметрів запитів.

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

Крім того, оскільки я використовую просту операцію додавання рядків, я здогадуюсь, продуктивність буде хорошою. Але все ж варто порівнювати з фрагментами цієї відповіді


3

Простий спосіб - ви можете зробити наступним чином

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

2

Якщо ви в RegEx ....

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

1
regexp повільний - йдіть простим швидким шляхом.
Арістос

1
@Angus: Ваш цикл дає вам "Сценарій може бути зайнятий ...", оскільки ви забули збільшити a++;. Виправляючи тести, в моєму Firefox 3.6 на iMac 2,93 ГГц Core 2 Duo, я отримую 8 мс для RegEx, і 3 мс для методу розділення ... Тим не менше +1 для відповіді, тому що це ще інший варіант.
Даніель Вассалло

1
дякую - я виправив це кілька хвилин тому! - Але справа в тому, що ви говорите 0,000005 секунд навіть для операції reg exp, продуктивність не є проблемою для жодного рішення :-)
plodder

1
match()повертає об’єкт. Напевно, цього не хочеш. Зателефонуйте toString()на нього (або +'').
bobince

1
Боб - хороший улов. Насправді він повертає масив збігів - масив рядків у цьому випадку. Так testURL.match (новий RegExp ("[^?] +")) [0] робить це
plodder

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

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

2

Якщо ви використовуєте backbone.js (який містить url anchorяк маршрут), URL-адреса query stringможе з’являтися:

  1. перед url anchor:

    var url = 'http://example.com?a=1&b=3#routepath/subpath';
  2. після url anchor:

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

Рішення:

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

1

Підхід із використанням стандарту 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

@Brad Що значення має протокол, коли все, що він робить, це повернення ім'я шляху після цього?
Дурень


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

Ось як я це зробив, також є підтримка RegEx.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.