JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの正規表現を使ってABC-1234形式の文字列を作成する方法

JavaScriptの正規表現を利用すると、「ABC1234」のような英数字の文字列を「ABC-1234」のようにハイフンで区切った読みやすい形式へ変換できます。以下に、実際に動作するサンプルコードを示します。

コード例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p class="formatting">ABC1234</p>
<script>
    function joinTheDashSymbol(m, r1,r2,r3,r4,r5) {
        if (r1)
            return [r1,r2,r3].join('-');
        else
            return [r4,r5].join('-');
    }
    $(".formatting").text(function(i, words) {
        words = words.replace(/^(\d{3})(\d{3})(\d{4})|([A-Z]{3})(\d{4})$/,        joinTheDashSymbol);
        return words;
    });
</script>
</body>
</html>

コードの解説

このコードのポイントは、正規表現 /^(\d{3})(\d{3})(\d{4})|([A-Z]{3})(\d{4})$/ の部分です。このパターンは2つのケースに対応しています。

  • (\d{3})(\d{3})(\d{4})：10桁の連続する数字を「3桁・3桁・4桁」に分割してキャプチャします（例：1234567890 → 123-456-7890）。
  • ([A-Z]{3})(\d{4})$：英大文字3文字と数字4文字の組み合わせをキャプチャします（例：ABC1234 → ABC-1234）。

マッチした際に呼び出されるコールバック関数 joinTheDashSymbol では、最初のパターン（電話番号形式）に一致した場合は r1〜r3 を、2つ目のパターン（ABC-1234形式）に一致した場合は r4・r5 を、それぞれ join('-') でハイフン連結して結果を返しています。

さらに、jQueryの text() メソッドにコールバック関数を渡すことで、クラス名 formatting を持つ要素のテキストがページ表示時に自動的に整形されます。

実行方法

上記のプログラムを実行するには、ファイルを anyName.html（例：index.html） という名前で保存し、VS Codeエディタ上でファイルを右クリックして「Open with Live Server」を選択してください。ブラウザが起動し、結果を確認できます。

実行結果

JavaScriptの正規表現を使ってABC-1234形式の文字列を作成する方法

  1. JavaScriptオブジェクトの内容を文字列として表示する方法

    JavaScriptでオブジェクトの内容を文字列形式で画面に表示したい場合、document.getElementById()でHTML要素を取得し、innerHTMLを使って書き出すのが基本的な方法です。オブジェクトを文字列に変換するには、JSON.stringify()メソッドを活用します。 実装手順 まず、表示先となるHTML要素にIDを設定します。次に、JavaScript側でそのIDを指定して要素を取得し、変換した文字列をinnerHTMLに代入します。 コード例 <!DOCTYPE html> <html lang="ja"> <h

  2. JavaScriptでボタンをクリックしたらテキストフィールドを空にする方法

    Web開発では、ボタンをクリックしたタイミングでテキストフィールド（テキストボックス）の中身を空にしたいケースがよくあります。たとえば、検索条件のリセットやフォーム入力内容の初期化などが代表例です。この記事では、JavaScriptを使ってこの処理をシンプルに実現する方法を解説します。 基本の考え方 実装に必要なのは、次の2つのステップだけです。 HTML側でonclick属性を使い、ボタンクリック時に呼び出すJavaScriptの関数を指定する 関数内でdocument.getElementById()によって対象の要素を取得し、そのvalueプロパティに空文字列（）を代入する docu