URLからクエリ文字列を削除する

JavaScriptのパスからクエリ文字列を削除する簡単な方法は何ですか？window.location.searchを使用するJqueryのプラグインを見ました。それはできません。私の場合のURLは、AJAXから設定される変数です。

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

これを取得する簡単な方法は次のとおりです。

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

2回目の更新：包括的な回答を提供するために、さまざまな回答で提案されている3つの方法のベンチマークを行っています。

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

Mac OS X 10.6.2上のFirefox 3.5.8での結果：

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

Mac OS X 10.6.2上のChrome 5.0.307.11での結果：

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

substringメソッドは、URLにクエリ文字列が含まれていない場合に空の文字列を返すため、機能が劣ります。他の2つのメソッドは、予想どおり、完全なURLを返します。ただし、特にFirefoxでは、部分文字列メソッドが最も速いことに注意してください。

最初の更新：実際には、Robustoによって提案された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"

これは古い質問かもしれませんが、クエリパラメータを削除するためにこの方法を試しました。リロードとクエリパラメータの削除を組み合わせる必要があるため、私にとってはスムーズに機能しているようです。

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

また、単純な文字列の追加操作を使用しているので、パフォーマンスは良いと思います。しかし、この回答のスニペットと比較する価値はまだあります

簡単な方法は次のようにすることができます

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

RegExを使用している場合...

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

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

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

（url anchorルートとして含まれている）backbone.jsを使用している場合、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', '');

標準を使用したアプローチ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

URLで複雑な操作を実行する必要がある場合は、jQuery URLパーサープラグインを確認してください。

(() => {
        '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サポートも持っています。