JavaScript で paste 内容を書き換える

はじめに

テキストフィールド、テキストエリア、編集可能な要素（contenteditable）へのペースト処理でペースト文字列を上書きして別の文字列や一部変更した文字列をペーストする処理を実現します。

サンプル

function onPaste(event) {
  const data = event.clipboardData || window.clipboardData;
  const paste = data.getData('text');

  // 上書き文字列の作成（改行文字を空文字に置換する）
  const text = paste.replace(/\r?\n/g, '');

  if (paste != text) {
    if (document.execCommand('insertText', false, text)) {
      // 上書きに成功した場合、元々の貼り付けイベントを中断（伝搬阻止）する
      event.preventDefault();
      event.stopImmediatePropagation();
    }
  }
};
document.getElementById('input_id').addEventListener('paste', onPaste, true);

使用案

  • 電話番号のハイフンを削除する
  • 住所の半角数字を全角数字に置き換える
  • 行超行末のスペースを削除する
  • ...

備考

Text 形式だけでなく、 HTML 形式で書き込むこともできます。

document.execCommand('insertText', false, text)
document.execCommand('insertHTML', false, text)

参考