変奏現実

/**
 * エンコーディング情報
 *  {
 *      "encoding": {
 *          8:  [
 *                  [上位開始バイト,上位終了バイト,下位開始バイト,下位終了バイト,[接頭語...],[接尾語...]]
 *              ... 
 *          ],
 *          16: [
 *                  [上位開始バイト,上位終了バイト,下位開始バイト,下位終了バイト,[接頭語...],[接尾語...]]
 *              ...
 *          ],
 *      },
 *  ...
 *  }
 */
const encodingInfoList = {
    "windows-1252": {
        //  8ビット
        8: [
            [0x0000, 0x0000, 0x0000, 0x00ff],
        ],
    },
    "shift-jis": {
        //  8ビット
        8: [
            [0x0000, 0x0000, 0x0000, 0x00ff],
        ],
        //  16ビット
        16: [
            //  第1面
            [0x0081, 0x009f, 0x0040, 0x007e],
            [0x0081, 0x009f, 0x0080, 0x00fc],
            [0x00e0, 0x00ef, 0x0040, 0x007e],
            [0x00e0, 0x00ef, 0x0080, 0x00fc],
            //  第2面
            [0x00f0, 0x00fc, 0x0040, 0x007e],
            [0x00f0, 0x00fc, 0x0080, 0x00fc],
        ],
    },
    "iso-2022-jp": {
        8: [
            //  8ビット
            [0x0000, 0x0000, 0x0000, 0x00ff, [0x1B, 0x28, 0x42], []],
        ],
        16: [
            // JIS X 0208コード表   １面
            //
            // 記号、英数字、かな(01区～08区)
            [0x0021, 0x0028, 0x0020, 0x007f, [0x1B, 0x24, 0x42], [0x1B, 0x28, 0x42]],
            // 第1水準漢字(16区～47区)
            [0x0030, 0x004f, 0x0020, 0x007f, [0x1B, 0x24, 0x42], [0x1B, 0x28, 0x42]],
            // 第2水準漢字(48区～84区)
            [0x0050, 0x0073, 0x0020, 0x007f, [0x1B, 0x24, 0x42], [0x1B, 0x28, 0x42]],
            [0x0074, 0x0074, 0x0020, 0x002f, [0x1B, 0x24, 0x42], [0x1B, 0x28, 0x42]],
        ],
    },
    "iso-2022-jp-2004": {
        8: [
            //  ASCII
            [0x0000, 0x0000, 0x0000, 0x00ff, [0x1B, 0x28, 0x42], []],
        ],
        16: [
            // JIS X 0213漢字集合１面:コード表
            // 1面（JIS X 0208および第3水準漢字）(01区～94区)
            [0x0021, 0x007e, 0x0020, 0x007f, [0x1B, 0x24, 0x28, 0x51], [0x1B, 0x28, 0x42]],

            // JIS X 0213漢字集合２面:コード表
            // 2面（第4水準漢字）(01区～08区)
            [0x0021, 0x007e, 0x0020, 0x007f, [0x1B, 0x24, 0x28, 0x50], [0x1B, 0x28, 0x42]],
        ],
    },
    "euc-jp": {
        //  8ビット
        8: [
            [0x0000, 0x0000, 0x0000, 0x007f],
            [0x0000, 0x0000, 0x00a0, 0x00df, [0x8e], []],
        ],
        // JIS X 0208コード表   １面
        //
        // 記号、英数字、かな(01区～08区)
        16: [
            [1 + 0x0a0, 8 + 0x0a0, 0 + 0x0a0, 95 + 0x0a0],
            // 第1水準漢字(16区～47区)
            [16 + 0x0a0, 47 + 0x0a0, 0 + 0x0a0, 95 + 0x0a0],
            // 第2水準漢字(48区～84区)
            [48 + 0x0a0, 83 + 0x0a0, 0 + 0x0a0, 95 + 0x0a0],
            [84 + 0x0a0, 84 + 0x0a0, 0 + 0x0a0, 15 + 0x0a0],
        ],
    },
};

var button = createElement('button');
button.className = 'fileButton fileDrag';
button.id = 'fileButton' + buttonId;
button.type = 'button';
button.innerHTML = caption;
parentObj.appendChild(button);

      var fileButton  = createElement('button', {
        className:  ['fileButton','fileDrag'],
        id:         'fileButton' + buttonId,
        type:       'button',
        innerHTML:  caption,
        parent:     parentObj
      });

    //  HTMLエレメントを作成します
    const createElement = (tagName, options) => {
      var eventList = ['ended'];
      var elm  = document.createElement(tagName);
      Object.keys(options).forEach( (key) => {
        // eventの場合
        if( eventList.includes(key) ) {
          elm.addEventListener(key,options[key]);
        } else {
          // event以外の場合
          switch(key) {
            case 'className': // プロパティはclassNameですが、タグの属性はclassなので別途に処理します。
              if(Array.isArray(options[key])) {
                elm.classList.add(...options[key]); // 配列を展開しパラメータとして引き渡す
              } else {
                elm.classList.add(options[key]);
              }
              break;
            case 'innerHTML': // setAttributeではタグ内にinnerhtml="***"と属性を生成するので別途に処理します。
              elm.innerHTML = options[key];
              break;
            case 'parent':    // setAttributeではタグ内にparent="***"と属性を生成する様で、画面に生成したエレメントを割り付けないので別途に処理します。
              options[key].appendChild(elm);
              break;
            default:
              elm.setAttribute(key, options[key]);
              break;
          }
        }
      });
      return elm;
    };

    const onLoadWindow = () => {
      //  コントロールのイベント処理を登録します
      const classEvents = [
        /* onload */
        { className:  'fileButton',         events:   { 'click':  onClickFileButton}},
      ...
      ];
      registEventListener(classEvents);
    };
    //  documenイベント処理
    var documentEvents = {};
    const documentEventListener = (event) => {
      // 処理
      var target = event.target || event.srcElement;
      Array.from(target.classList).map((className) => documentEvents[event.type][className])
        .filter((func) => func !== undefined)
        .forEach((func) => func(event));
    };
    //  指定クラスを持つＨＴＭＬエレメントにイベントを登録します
    const registEventListener = (classEvents) => {
      // classEvents配列数分ループ
      classEvents.forEach((classEvent) => {
        // イベント数分ループ
        Object.keys(classEvent.events).forEach((eventName) => {
          // クラスのイベントごとの処理
          if( documentEvents[eventName] === undefined ) {
            // documentEvents[eventName][classEvent.className]に代入できるように初期化
            documentEvents[eventName] = {};
            document.addEventListener(eventName, documentEventListener);
          }
          // ※同じクラス・同じイベントに対応する処理は１つだけ
          documentEvents[eventName][classEvent.className] = classEvent.events[eventName];
        });
      });
    };
    //  画面初期表示時の処理
    window.onload = onLoadWindow;

const classEvents =[
  {
    className:  'fileButton',
    events:   {
      'click':  onClickFileButton}
    },
  },
  ...
]

var documentEvents = [
  {
    'click': [
      {
        'fileButton': onClickFileButton,
        ...
      }
    ],
  ...
  }
]

parseInt(id.match(/\d+$/))

fileName.match(/([.])(.*$)/)[2]