1
0

More than 1 year has passed since last update.

小道具:丸括弧付き文字への変換

Last updated at Posted at 2023-03-21

() の間にある文字に対応する丸括弧付き文字に変換します。

例として「 (19) 」ならば「 ⒆ 」に変換します。

See the Pen 丸括弧付文字の変換 by Ikiuo (@ikiuo) on CodePen.

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>丸括弧付文字への変換</title>
  </head>
  <body>
    <script>

      const SymbolTable = {
          "1":"", "2":"", "3":"", "4":"", "5":"",
          "6":"", "7":"", "8":"", "9":"", "10":"",
          "11":"", "12":"", "13":"", "14":"", "15":"",
          "16":"", "17":"", "18":"", "19":"", "20":"",

          "A":"🄐", "B":"🄑", "C":"🄒", "D":"🄓", "E":"🄔",
          "F":"🄕", "G":"🄖", "H":"🄗", "I":"🄘", "J":"🄙",
          "K":"🄚", "L":"🄛", "M":"🄜", "N":"🄝", "O":"🄞",
          "P":"🄟", "Q":"🄠", "R":"🄡", "S":"🄢", "T":"🄣",
          "U":"🄤", "V":"🄥", "W":"🄦", "X":"🄧", "Y":"🄨",
          "Z":"🄩",

          "a":"", "b":"", "c":"", "d":"", "e":"",
          "f":"", "g":"", "h":"", "i":"", "j":"",
          "k":"", "l":"", "m":"", "n":"", "o":"",
          "p":"", "q":"", "r":"", "s":"", "t":"",
          "u":"", "v":"", "w":"", "x":"", "y":"",
          "z":"",

          "":"", "":"", "":"", "":"", "":"",
          "":"", "":"", "":"", "":"", "":"",
          "":"", "":"", "":"", "":"", "":"",
          "":"", "":"",
          "":"", "":"", "":"", "":"", "":"",
          "":"", "":"", "":"", "":"", "":"",
          "":"", "":"", "":"", "":"", "":"",
          "":"", "":"", "":"", "":"",

          "":"", "":"", "":"", "":"", "":"",
          "":"", "":"", "":"", "":"", "":"",
          "":"", "":"", "":"", "":"",
          "":"", "":"", "":"", "":"", "":"",
          "":"", "":"", "":"", "":"", "":"",
          "":"", "":"", "":"", "":"", "":"",
          "오전":"", "오후":"",
      };

      function onInput(text) {
          document.getElementById('out').innerText =
              text.replace(/(\([^()]+\))/g, ((_, p) =>
                  SymbolTable[p.slice(1, p.length - 1)] ?? p));
      }

      // 要素生成は CodePen のトラブル対策.
      window.onload = function() {
          document.body.innerHTML = [
              '<table border="1">',
              '<tr><th>入力</th><td>',
              '<textarea rows="6" cols="80" oninput="onInput(this.value)"></textarea>',
              '</td></tr>',
              '<tr><th>出力</th><td id="out"></td></tr>',
              '</table>',
          ].join('');
      };

    </script>
  </body>
</html>
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0