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の日時・時刻用ライブラリ「Day.js」の利用方法について
JavaScriptの日時・時刻用を取り扱う際、PHPと比べると(個人的には)使 ...
-
JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法
先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...
-
JavaScriptのマップ用ライブラリ「MapLibre GL JS」の利用方法
あるサイトをWappalyzerで調査していた際に「MapLibre GL JS ...
-
Dexie.jsを利用してIndexedDBを取り扱う方法
IndexedDBを用いて色々するという案件を見かけたが、そもそもIndexed ...
-
JavaScriptにて電子書籍や漫画ビューア用のライブラリ「ToraViewer」の利用方法
電子書籍や漫画ビューア用を設置したい。条件としてはレスポンシブ対応していること。 ...