「大文字・小文字・全角・半角変換」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

大文字・小文字・全角・半角変換

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>大文字・小文字・全角・半角変換</title>
  7. <body>
  8. <h1>大文字・小文字・全角・半角変換</h1>
  9. <script type="text/javascript">
  10.   // 英数字を半角変換
  11.   function changeHalfChar()
  12.   {
  13.     str = document.getElementById("InputText").value
  14.     
  15.     HalfChar = str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s)
  16.     {
  17.       return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
  18.     });
  19.     
  20.     alert(HalfChar);
  21.   }
  22.   
  23.   // 英数字を全角変換
  24.   function changeFullChar()
  25.   {
  26.     str = document.getElementById("InputText").value
  27.     
  28.     FullChar = str.replace(/[A-Za-z0-9]/g, function(s)
  29.     {
  30.       return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
  31.     });
  32.     
  33.     alert(FullChar);
  34.   }
  35.   
  36.   // 英語を小文字変換
  37.   function changeLowerChar()
  38.   {
  39.     str = document.getElementById("InputText").value
  40.     
  41.     LowerChar = str.toLowerCase();
  42.     
  43.     alert(LowerChar);
  44.   }
  45.   
  46.   // 英語を大文字変換
  47.   function changeUpperChar()
  48.   {
  49.     str = document.getElementById("InputText").value
  50.     
  51.     UpperChar = str.toUpperCase();
  52.     
  53.     alert(UpperChar);
  54.   }
  55.   
  56. </script>
  58. <input type="text" value="" id="InputText" /><br />
  59. <input type="button" value="英数字を半角変換" onclick="changeHalfChar()" />
  60. <input type="button" value="英数字を全角変換" onclick="changeFullChar()" />
  61. <input type="button" value="英語を小文字変換" onclick="changeLowerChar()" />
  62. <input type="button" value="英語を大文字変換" onclick="changeUpperChar()" />
  64. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  65. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  66. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  67. </div>
  69. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  70. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  71. </div>
  73. </body>
  74. </html>