勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptで簡単にURL操作が行える「domurl」ライブラリの利用方法

  JavaScript

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にて上記ソースコードを実行するとコメント部分の結果が返ってくる筈。

https://taitan916.info/sample/domurl/?id=123&item=bag&store=%E3%82%B7%E3%83%A7%E3%83%83%E3%83%97#anchor_link

 

所感

JavaScriptでGETパラメータを操作する際、以前は「window.location.search」でパラメータを取得してsplitで分割するような形だったと思うが、今はsearchParamsというのがあるみたい。

ライブラリだとGETパラメータ以外にハッシュタグ等、色々な操作が行えるがGETパラメータだけでよいのであればsearchParamsでいいかも。

 - JavaScript

  関連記事

バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Tom Select」の利用方法

先日バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装でき ...

横スクロール可能な要素を視覚的に分かりやすくする「ScrollHint」ライブラリの利用方法

横長のtableを設置し、CSSのoverflowで横スクロール可能にしてもユー ...

jQueryのトースト(通知)用ライブラリ「iziToast.js」の利用方法

システム構築の際、エラー表示をJavaScriptのアラートではなくトースト(通 ...

JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法

サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...

JavaScriptにて「QRCode.js」ライブラリを利用してQRコードを生成する方法

PHPが使えない環境で動的にQRコードを生成したかった。以前にメモしたAPI等の ...