LANG SELRCT

コードを書く場所についてはこちら

2018年3月21日水曜日

文字をUTF16と16進数の数値に変換する


テキスト入力欄に文字を入力するとUTF16と16進数欄にそれぞれの数値が入ります







コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
  <style>
    .card {
      width: 360px;
      padding: 15px;
      border-radius: 2px;
      border: solid 1px lightgray;
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    }

    textarea,
    input[type='text'] {
      width: 95%;
      font-size: 15px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class='card'>
    <p>
      <label>テキスト入力欄</label>
      <input type='text' id='keywords' class='text_midium'>
    </p>
    <p>
      <label>UTF16</label>
      <textarea id='ta'></textarea>
    </p>
    <p>
      <label>16進数</label>
      <textarea id='ta2'></textarea>
    </p>
  </div>
  <script>
    var keywords = document.getElementById('keywords')
    var ta = document.getElementById('ta')
    var ta2 = document.getElementById('ta2')

    keywords.focus()
    keywords.onkeyup = split_text

    function split_text() {
      var str = keywords.value
      var utf16 = []
      var hexadecimal = []
      for (var i = 0; i < str.length; i++) {
        utf16.push(str.charCodeAt(i))
        hexadecimal.push(utf16[i].toString(16));
      }
      ta.value = utf16
      ta2.value = hexadecimal
    }
  </script>
</body>
</html>
意訳
  




cardのスタイル
幅
内側の余白
角丸
枠線
影


textareaと
input type='text'のスタイル
幅
文字の起きさ
外側の余白






文字入力欄



UTF16の結果を入れる欄



16進数の結果を入れる欄




idがkeywordsの要素を取得
idがtaの要素を取得
idがta2の要素を取得

文字の入力欄をフォーカスする
文字が入力されたらsplit_textを実行する

この機能がやること
入力された文字を取得する
utf16の結果を入れる配列を用意する
16進数の結果を入れる配列を用意する
入力された文字の数だけ以下を繰り返す
UTF16の値を表す数値を配列に追加する
16進数を配列に追加する

taにresultを入れる
ta2にresult2を入れる