JavaScriptでURIに日本語を受け渡しをする

URI decode encode hash

encodeURIComponentで文字列をURI用の文字列に変換する ( / スラッシュ等の記号も %2F のようになる)。
location.hrefに代入してURIを変更する。
location.hrefからURIを取得する。
decodeURIComponentで日本語に変換する。

リンクは無効化せずにページ遷移してしまう様子。

hashの書き換え

serachの書き換え

動的に書き換えたlocation.searchは取得できない。

取得した情報の確認

location.hash(URLの#以降の文字列): -
location.hash (decodeURIComponent変換後): -
location.search (URLの?以降の文字列): -
charset 文字コード: -
document.title: -


  view source
  JavaScript
  $(function(){
  $('#set_hash').click(function(){
    var hash = $(this).attr('href');
    hash = hash.replace(/^#/, '');
    hash = encodeURIComponent(hash);
    location.hash = hash;
    return false;
  });

  $('#get_hash').click(function(){
    var hash = location.hash;
    $('#l_hash_raw').text(hash);
    hash = decodeURIComponent(hash);
    $('#l_hash').text(hash);
    return false;
  });


  $('#set_search').click(function(){
    var str = $(this).attr('href');
    str = str.replace(/^#/, '');
    str = encodeURIComponent(str);
    location.search = str;
    return false;
  });

  $('#get_search').click(function(){
    var str = location.search;
    hash = decodeURIComponent(str);
    $('#l_search').text(str);
    return false;
  });


  $('#d_charset').text(document.charset);
  $('#d_title').text(document.title);
  $('#l_search').text(location.search);


  $('#encodeBtn').on('click', function(){
    var val = $('#input').val();
    encodeVal = encodeURIComponent(val);
    $('#output').val(encodeVal);
  });
  $('#decodeBtn').on('click', function(){
    var val = $('#input').val();
    decodeVal = decodeURIComponent(val);
    $('#output').val(decodeVal);
  });
  
});

  CSS
  #demo ol,
#demo ul,
#demo dl{
  margin:10px;
  padding:10px;
  border:2px solid #999999;
  line-height:32px;
  border-radius:8px;
}
#demo ol li{
  margin-left:20px;
  list-style-type:decimal;
}


#demo dl dt,
#demo dl dd{
  display:block;
  height:2em;
  float:left;
}

#demo dl:after{
  content:"";
  display:block;
  clear:both;
}
#demo dl dt{
  width:360px;
  clear:both;
  font-weight:bold;
}
#demo dl dt:after{
  content:":";
}
#demo dl dd{
  width:480px;
  margin-left:1em;
}


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