JavaScriptで簡単にURL操作が行える「domurl」ライブラリの利用方法
JavaScriptでGETパラメータやURLを操作する際にsplitで配列に分割したり等、やや面倒な作業が必要になる。この辺りをライブラリで解決できないか探したところ「domurl」がバニラJS対応な上、簡単に取り扱えた。以下に実装方法をメモ。
domurl
GitHub
https://github.com/Mikhus/domurl
CDN
CDNで使う場合は以下を記述する。
<script src="https://cdn.jsdelivr.net/npm/domurl@2.3.4/url.min.js"></script>
利用方法
ソースコード
<script src="https://cdn.jsdelivr.net/npm/domurl@2.3.4/url.min.js"></script>
<script>
const url = new Url;
console.log(url.protocol); //https
console.log(url.host); //taitan916.info
console.log(url.path); ///sample/domurl/
console.log(url.query); //Object { id: "123", item: "bag", store: "ショップ" }
console.log(url.hash); //anchor_link
</script>
出力結果
以下URLにて上記ソースコードを実行するとコメント部分の結果が返ってくる筈。
所感
JavaScriptでGETパラメータを操作する際、以前は「window.location.search」でパラメータを取得してsplitで分割するような形だったと思うが、今はsearchParamsというのがあるみたい。
ライブラリだとGETパラメータ以外にハッシュタグ等、色々な操作が行えるがGETパラメータだけでよいのであればsearchParamsでいいかも。
関連記事
-
-
JavaScriptでランダムなカラーコードを生成する「RandomColor」ライブラリの利用方法
先日PHPでランダムなカラーコードを生成する「RandomColor.php」ラ ...
-
-
表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...
-
-
バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリの利用方法
サイト内に日時ピッカーを実装する場合、jQueryの「DateTimePicke ...
-
-
パスワードの強度を判定できる「zxcvbn」ライブラリの使用方法
アカウントを作成するようなページで偶にパスワードの強度を判定してメーターで表示さ ...
-
-
JavaScriptの日時・時刻用ライブラリ「Day.js」の利用方法について
JavaScriptの日時・時刻用を取り扱う際、PHPと比べると(個人的には)使 ...