URLを解析して各パーツに分解・取得する


  view source
  JavaScript
  // URLから情報を取得する

var url = new URL(location);

var params = new URLSearchParams(url.search.slice(1));
console.log(params);
console.log(params.values());
console.log(params.toString());

for(let value of params.values()) {
  console.log(value);
}

for(var pair of params.entries()) {
  console.log({ [pair[0]] : pair[1]}); 
}

var a = params.get('aa');


var values = [
  location.href,
  location.hostname,
  location.pathname,
  location.search,
  location.hash,
  url,
  params,
  a,
];

var val = '';
values.forEach(function(obj){
  val += '\n\n';
  val += JSON.stringify(obj);
});


$(function(){
  $('<textarea>')
    .css({width:'90%', height:'400px'})
    .val(val)
    .appendTo($('#demo'));
});





$(function(){

  var hrefs = [
    '#hash',
    '?search=1&aa=bb',
  ];

  hrefs.forEach(function(href){
    $('<a>', {href:href})
      .css({display:'block'})
      .text(href)
      .appendTo($('#demo'));
  });
});

  CSS
  
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/js-URLSearchParams/?aa=bb
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。