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

【JavaScript】正規表現で名前が半角英数字・アンダースコアのみかどうかを判定する方法

本記事では、JavaScriptの正規表現を使って、入力された名前（テキスト）が「数字・英字・アンダースコア」のみで構成されているかどうかをチェックする方法を解説します。

使用する正規表現

今回使用する正規表現は以下の通りです。

/^\w+$/

各要素の意味は次の通りです。

  • ^ … 文字列の先頭を表します
  • \w+ … 半角英字（a〜z、A〜Z）、数字（0〜9）、アンダースコア（_）のいずれかに1文字以上連続でマッチします
  • $ … 文字列の末尾を表します

つまり、文字列全体が英数字とアンダースコアだけで構成されている場合にのみマッチし、空白や他の記号が含まれるとマッチしなくなります。

サンプルコード

以下は、入力欄のテキストが条件を満たしているかを「CHECK」ボタンで判定する完全なサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>数字・英字・アンダースコアのみかどうかを正規表現でチェック</h1>
<div style="color: green;" class="result"></div>
<input type="text" class="txt" />
<button class="Btn">CHECK</button>
<h3>
上のボタンをクリックすると、入力されたテキストが数字・英字・アンダースコアのみで
構成されているかどうかを判定します
</h3>
<script>
    let resEle = document.querySelector(".result");
    document.querySelector(".Btn").addEventListener("click", () => {
        var str = document.querySelector(".txt").value;
        var regex = /^\w+$/;
        var match = str.match(regex);
        if (match) resEle.innerHTML = "入力されたテキストは有効です";
        else resEle.innerHTML = "入力されたテキストは無効です";
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような画面が表示されます。

【JavaScript】正規表現で名前が半角英数字・アンダースコアのみかどうかを判定する方法

スペースを含むテキストを入力して「CHECK」ボタンをクリックした場合 −

【JavaScript】正規表現で名前が半角英数字・アンダースコアのみかどうかを判定する方法

有効なテキスト（英数字・アンダースコアのみ）を入力して「CHECK」ボタンをクリックした場合 −

【JavaScript】正規表現で名前が半角英数字・アンダースコアのみかどうかを判定する方法

補足ポイント

  • JavaScriptの \w は [A-Za-z0-9_] と同等であり、日本語などのマルチバイト文字にはマッチしないため、日本語を含む入力は「無効」と判定されます。
  • str.match(regex) はマッチしなかった場合に null を返すため、その真偽値でバリデーションの成否を簡単に判定できます。
  • ユーザーIDや変数名など、使用できる文字を限定したい入力項目のバリデーションに幅広く応用できるパターンです。
  1. JavaScriptの「!=」と「!==」演算子の違いをわかりやすく解説

    JavaScriptには、値が等しくないことを判定する不等価演算子として「!=」と「!==」の2種類が用意されています。この2つは似た名前ですが、動作に重要な違いがあります。本記事では、それぞれの特徴と具体的な使い分け方について解説します。 「!=」比較演算子（緩い不等価）とは 「!=」は型のチェックを行わない不等価演算子です。比較の前に、両オペランドのデータ型を自動的に変換（型強制・暗黙的な型変換）してから値を比較します。 そのため、数値と文字列のように異なる型同士でも、値が同じであれば等しいと判断されます。例えば、1 != 1 は文字列 1 が数値 1 に変換されて比較されるため、結果は

  2. JavaScriptで数値を丸める・切り捨てる方法｜Math.round()とMath.trunc()の違いと使い方

    JavaScriptには、小数を整数へ変換するためのメソッドとして、Math.round() と Math.trunc() の2つが標準で用意されています。Math.round()：小数点以下を四捨五入し、最も近い整数に丸めます。例えば「3.5」は「4」に、「3.4」は「3」になります。Math.trunc()：小数点以下を単純に取り除き、整数部分だけを残します。「3.9」も「3.1」もどちらも「3」になります。それぞれの特徴を踏まえながら、実際のコード例を見ていきましょう。Math.round() と Math.trunc() の違いメソッド動作例（3.999）Math.round()四捨五