0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ちょっとした工夫で効率化!03【PR】パソナテックAdvent Calendar 2020

Day 1

値がセットされていないパラメータをURLから消し去るブックマークレット

Posted at

はじめに

使われていないパラメータがURLに存在すると美しくないので、それらを削除してスッキリさせたい時に使うブックマークレットです。引用する時に使うと力を発揮するやつです。

実行例は、こうなります。

使用前
https://www.google.com/search?source=hp&ei=&q=朗報&oq=&gs_lcp=&sclient=psy-ab&ved=&uact=5

使用後
https://www.google.com/search?source=hp&q=朗報&sclient=psy-ab&uact=5

#ブックマークレット

javascript:(()=>{const e=location.href,a=new URL(e),r=new URLSearchParams(a.search);let n=new URLSearchParams;for(const[e,a]of r)a.length>0&&n.set(e,a);Array.from(n).length>0&&(n="?"+n),location.href=a.origin+a.pathname+n})();

上記のコードは、次のコードを短縮したものです。

(() => {
// ----------------------------------------------
const url = location.href;

// str => url obj
const url_obj = new URL(url);
// search parameters
const search_params = new URLSearchParams(url_obj.search);

// valid parameters
let valid_params = new URLSearchParams();
for (const [key, value] of search_params) {
    if (value.length > 0) {
        valid_params.set(key, value);
    }
}

// location.href
if (Array.from(valid_params).length > 0) valid_params = '?' + valid_params;
location.href = url_obj.origin + url_obj.pathname + valid_params;
// ----------------------------------------------
})();

解説

大体の流れは次の通り。

  • 文字列であるURLからURLオブジェクトを作り、そこから検索パラメータを取得。
  • 有効なパラメータを保存するvalid_paramsを用意。後ほど使う。
  • 検索パラメータはkeyとvalueの組になっており、これを順に見ていく。その際、値の有無を長さ(length)で判断して場合分けする。
  • 値を与えられているパラメータについては、そのkeyとvalueを先ほどのvalid_paramsに追加していく。値を与えられていないパラメータのことは、何も考えずに忘れてしまっていい。
  • 最後にURLを組み立てて、読み込んで完結。

あとがき

今回は、こちらの記事に触発されて書きました。ありがとうございました。

参考

  1. https://developers.google.com/web/updates/2016/01/urlsearchparams
  2. https://developer.mozilla.org/ja/docs/Web/API/URL/URL
  3. https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams
0
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?