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にて領収書等のテンプレートHTMLページをPDFファイル化させる方法(html2pdf)
JavaScriptにてhtml2pdfというライブラリを使用することでHTML ...
-
-
円形のプログレスバーをprogressbar.jsで実装する方法
円形のプログレスバーを実装したかった。CSSだったり画像を用いたりする方法もあっ ...
-
-
JavaScript / PHPにて「lz-string」を用いてデータの圧縮・展開する方法
文字数が多いGETパラメータを送信したいというケースがあった。また、送信側はJa ...
-
-
ブラウザ開発者ツールの起動を検出しソースコード変更やリダイレクト設定できる「console-ban」ライブラリの利用方法
他サイトのソースコードを拝見するため開発者ツールを開こうとすると、偶に「デバッガ ...
-
-
JavaScriptでWebカメラやスマホカメラを利用してQRコードを読み取りURLを返す方法
JavaScriptのjsQRというライブラリで簡単にWebページ版QRコードリ ...