HTMLフォームとJavaScriptで実現！電話番号を正規表現に変換して検証する方法

2024-04-20

JavaScript、HTML、正規表現を用いたユーザー入力文字列の正規表現変換

このチュートリアルでは、JavaScript、HTML、および正規表現を使用して、ユーザー入力文字列を正規表現に変換する方法を説明します。この方法は、フォーム入力の検証、データ処理、テキスト解析などのさまざまなタスクに役立ちます。

動作原理

HTMLフォームを作成し、ユーザーが入力できるテキストフィールドを用意します。
JavaScriptを使用して、ユーザー入力から値を取得します。
正規表現オブジェクトを作成し、変換したいパターンを定義します。
replace() メソッドを使用して、ユーザー入力文字列を正規表現パターンと一致する部分に置換します。
変換された正規表現を HTML要素に表示します。

例

以下の例では、ユーザーが入力した電話番号を正規表現に変換します。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>電話番号変換</title>
</head>
<body>
    <h1>電話番号変換</h1>
    <input type="text" id="phoneNumberInput" placeholder="電話番号を入力">
    <button onclick="convertPhoneNumber()">変換</button>
    <p id="result"></p>

    <script src="script.js"></script>
</body>
</html>

JavaScript

function convertPhoneNumber() {
    const phoneNumberInput = document.getElementById('phoneNumberInput');
    const phoneNumber = phoneNumberInput.value;
    const regex = /\d{3}-\d{3}-\d{4}/;
    const formattedPhoneNumber = phoneNumber.replace(regex, '(0$1)-$2-$3');
    const resultElement = document.getElementById('result');
    resultElement.textContent = '正規表現に変換された電話番号: ' + formattedPhoneNumber;
}

説明

HTMLコードは、input要素とbutton要素を含むシンプルなフォームを作成します。
convertPhoneNumber() 関数は、ユーザー入力から電話番号を取得し、正規表現オブジェクトを作成します。
正規表現オブジェクトは、\d{3}-\d{3}-\d{4} というパターンを定義します。これは、3桁の数字、ハイフン、3桁の数字、ハイフン、4桁の数字という形式の電話番号を表します。

応用例

この例は、電話番号変換のみにとどまらず、様々な用途に応用できます。

メールアドレスの形式チェック
郵便番号の検証
クレジットカード番号の処理
テキストから特定のパターンを抽出

補足

この例は基本的な概念を示しています。実際の使用状況に合わせて、コードを調整する必要があります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>電話番号変換</title>
</head>
<body>
    <h1>電話番号変換</h1>
    <input type="text" id="phoneNumberInput" placeholder="電話番号を入力">
    <button onclick="convertPhoneNumber()">変換</button>
    <p id="result"></p>

    <script src="script.js"></script>
</body>
</html>

function convertPhoneNumber() {
    const phoneNumberInput = document.getElementById('phoneNumberInput');
    const phoneNumber = phoneNumberInput.value.trim(); // 入力値の空白を除去

    // 複数の電話番号を処理できるように、カンマで区切られた文字列を配列に変換
    const phoneNumbers = phoneNumber.split(',');

    let formattedPhoneNumbers = [];
    for (const phoneNumber of phoneNumbers) {
        const regex = /\d{3}-\d{3}-\d{4}/;
        const formattedPhoneNumber = phoneNumber.replace(regex, '(0$1)-$2-$3');
        if (formattedPhoneNumber !== phoneNumber) {
            formattedPhoneNumbers.push(formattedPhoneNumber);
        } else {
            formattedPhoneNumbers.push('**無効な電話番号: ' + phoneNumber + '**');
        }
    }

    const resultElement = document.getElementById('result');
    resultElement.innerHTML = '<b>変換結果:</b><br>' + formattedPhoneNumbers.join('<br>');
}

trim() メソッドを使用して、ユーザー入力値の先頭と末尾の空白を除去します。
split() メソッドを使用して、カンマで区切られた複数の電話番号を処理できるように、入力文字列を配列に変換します。
formattedPhoneNumbers 配列を使用して、変換された電話番号を格納します。
ループを使用して、各電話番号に対して正規表現による変換を実行します。
formattedPhoneNumber !== phoneNumber 条件を使用して、入力値が有効な電話番号かどうかを確認します。
無効な電話番号の場合は、エラーメッセージを表示します。
innerHTML プロパティを使用して、変換結果を HTML要素に表示します。

改善点

エラー処理を追加して、無効な入力をより丁寧に処理します。
国コードやハイフンの有無など、さまざまな形式の電話番号に対応できるように正規表現を拡張します。
変換された電話番号をリストや表形式で表示します。

このサンプルコードは、基本的な機能に加えて、いくつかの改善点も提案しています。実際の使用状況に合わせて、コードを調整して、より洗練された機能を実現してください。

正規表現を使わない方法

文字列操作

ループを使用して、各文字をチェックし、必要な形式にフォーマットします。
条件分岐を使用して、電話番号の種類（国内、国際など）に応じて処理を分岐します。
String クラスのメソッド（slice(), substring(), replace(), etc.）を使用して、文字列を操作します。

この方法は、比較的単純でわかりやすいですが、複雑な形式の電話番号を処理する場合には難しくなる可能性があります。

function convertPhoneNumberWithoutRegex(phoneNumber) {
    phoneNumber = phoneNumber.trim();
    const formattedPhoneNumber = [];
    for (let i = 0; i < phoneNumber.length; i++) {
        if (i === 0) {
            formattedPhoneNumber.push('(0');
        } else if (i === 4) {
            formattedPhoneNumber.push(')');
        } else if (i === 8) {
            formattedPhoneNumber.push('-');
        }
        formattedPhoneNumber.push(phoneNumber[i]);
    }
    return formattedPhoneNumber.join('');
}

ライブラリを使用する

電話番号の検証やフォーマットに特化したライブラリを使用します。
これらのライブラリは、さまざまな形式の電話番号を処理し、エラー処理も提供することが多いです。

この方法は、複雑な処理を簡単に実行できるという利点がありますが、ライブラリの追加インストールと読み込みが必要となります。

// ライブラリのインストール
npm install e164js

function convertPhoneNumberWithLibrary(phoneNumber) {
    const E164JS = require('e164js');
    const parser = new E164JS();
    const formattedPhoneNumber = parser.parse(phoneNumber);
    if (formattedPhoneNumber.isValid()) {
        return formattedPhoneNumber.number;
    } else {
        return '**無効な電話番号: ' + phoneNumber + '**';
    }
}