国際電話番号に適合した電話番号が入力できる入力文字変換処理を作成する

クリアしたい課題！

国際電話番号もしくは日本の電話番号の入力を可能にしつつ、不要な文字は入力できないような入力文字変換処理を作りたい！

今回扱わない話題

実務で使用するためにはバリデーションとセットで使用する必要があると思うが、バリデーション部分は扱わない。

やってみた

<script>  
    let value = '';  
  
    const convertToTel = (value) => {  
        // 全角文字の場合は半角にする  
        value = value.replace(/[０-９]/g, (s) => {  
            return String.fromCharCode(s.charCodeAt(0) - 65248);  
        });  

			  // 数字もしくは+以外は空文字変換する
        value = value.replace(/^[^0-9+]/, '');  
  
        // 最初の1文字が+または数字であることを確認  
        if (/^[+0-9]/.test(value)) {  
            // 最初の1文字を保持し、それ以外の非数字文字を削除  
            const firstChar = value.charAt(0);  
            const rest = value.slice(1).replace(/\D+/g, '');  
            return firstChar + rest;  
        }  
        return value;  
    };  
  
    $: value = convertToTel(value);  
</script>  
  
<h1>電話番号を入力して下さい！</h1>  
<input type="tel" bind:value={value} />  
<p>{value}</p>  

デモ

まとめ

汎用的に使用できそうなロジックなので、記事にまとめてみた。
国際電話番号はなかなか馴染みがないので、記憶に残っていた実装でもある。