Удалить строку запроса из URL

149

Каков простой способ удалить строку запроса из пути в Javascript? Я видел плагин для JQuery, который использует window.location.search. Я не могу этого сделать: URL-адрес в моем случае - это переменная, установленная с помощью AJAX.

var testURL = '/Products/List?SortDirection=dsc&Sort=price&Page=3&Page2=3&SortOrder=dsc'
Матиас Ф
источник

Ответы:

350

Легкий способ получить это:

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

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

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

РЕДАКТИРОВАТЬ

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

function getPathFromUrl(url) {
  return url.split(/[?#]/)[0];
}
Робусто
источник
4
+1 ... На самом деле split () в этом случае лучше, чем substring ().
Daniel Vassallo
10
Маргинальный оптимизация , если это имеет значение (вероятно , нет): split('?', 1)[0].
bobince
@ChristianVielma: ?это строковый литерал, а не регулярное выражение.
Робусто
@Robusto Мне очень жаль, плохо ... Я проверял его на Java (который интерпретирует его как регулярное выражение) :(
Christian Vielma
4
Эй, Робусто, а почему бы и нет .split(/[?#]/)[0]?
caub
33

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 (), предложенный Робусто, является лучшим решением, чем тот, который я предлагал ранее, поскольку он будет работать даже при отсутствии строки запроса:

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
О_О Очень подробно, но… почему? Очевидно, выигрывает наиболее гибкий и подходящий метод, скорость здесь абсолютно не важна.
deceze
1
@deceze: Просто из любопытства ... И потому что в комментариях к ответу Ангуса был спор о производительности метода регулярных выражений.
Даниэль Вассалло
6
Очень интересно, Дэниел. И если мне когда-нибудь понадобится выполнить синтаксический анализ 10К URL на странице, я буду искать другое направление работы. :)
Робусто
Я на самом деле немного потрясен тем, что можно выполнить 10 тыс. Совпадений с регулярными выражениями за 44 мс. В будущем, думаю, я буду склонен их больше использовать.
TheGerm
14

Это может быть старый вопрос, но я пробовал этот метод для удаления параметров запроса. Кажется, у меня все работает гладко, так как мне также нужна была перезагрузка в сочетании с удалением параметров запроса.

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

Кроме того, поскольку я использую простую операцию сложения строк, я предполагаю, что производительность будет хорошей. Но все же стоит сравнить с фрагментами в этом ответе

damitj07
источник
3

Простой способ: вы можете сделать следующее

public static String stripQueryStringAndHashFromPath(String uri) {
 return uri.replaceAll(("(\\?.*|\\#.*)"), "");
}
karthik m
источник
2

Если вы используете RegEx ....

var newURL = testURL.match(new RegExp("[^?]+"))
трудяга
источник
1
регулярное выражение медленное - выбирайте легкий и быстрый способ.
Аристос,
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 (new RegExp ("[^?] +")) [0] делает это
plodder
2
var path = "path/to/myfile.png?foo=bar#hash";

console.log(
    path.replace(/(\?.*)|(#.*)/g, "")
);
yckart
источник
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', '');
викид
источник
2

Подход с использованием стандартного 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 какое значение имеет протокол, когда все, что он делает, после этого возвращает имя пути?
Дурак
@The Fool - new URL()иначе произойдет сбой с сообщением об ошибке «Недопустимый URL»
Том
-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.

javascript-noob
источник