JavaScriptで英数字のみをチェックするサンプルコード
2024-04-03
JavaScript で英数字のみを許可する正規表現は、以下のパターンを使用できます。
/^[a-zA-Z0-9]+$/
このパターンは、以下の条件を満たす文字列にマッチします。
- 最初と最後の文字が英字（a-z、A-Z）または数字（0-9）である
- 英字（a-z、A-Z）または数字（0-9）のみで構成されている
詳細
^は、文字列の始点を表します。a-zA-Zは、半角英字を表します。+は、その前の文字が1回以上出現することを表します。
例
以下のコードは、入力された文字列が英数字のみかどうかをチェックする例です。
function isAlphanumeric(str) {
return /^[a-zA-Z0-9]+$/.test(str);
}
const input = "abc123";
if (isAlphanumeric(input)) {
console.log("英数字のみです");
} else {
console.log("英数字以外が含まれています");
}
このコードを実行すると、以下の出力が得られます。
英数字のみです
補足
- 上記のパターンは、半角英数字のみを許可します。全角英数字も許可したい場合は、
[a-zA-Z0-9ぁ-んァ-ン]のように範囲を拡張する必要があります。 - ハイフンやアンダーバーなどの記号も許可したい場合は、範囲にそれらの記号を追加する必要があります。
- 空白文字も許可したい場合は、
[a-zA-Z0-9\s]のように範囲に\sを追加する必要があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>英数字のみチェック</title>
</head>
<body>
<input type="text" id="input">
<button onclick="check()">チェック</button>
<p id="message"></p>
<script>
function check() {
const input = document.getElementById("input").value;
const message = document.getElementById("message");
if (/^[a-zA-Z0-9]+$/.test(input)) {
message.textContent = "英数字のみです";
} else {
message.textContent = "英数字以外が含まれています";
}
}
</script>
</body>
</html>
<input type="text" id="input">
<button onclick="check()">チェック</button>
<p id="message"></p>
入力欄に英数字のみを入力して「チェック」ボタンをクリックすると、「英数字のみです」とメッセージが表示されます。入力欄に英数字以外の文字が含まれている場合は、「英数字以外が含まれています」とメッセージが表示されます。
ポイント
getElementByIdメソッドを使用して、HTML要素を取得しています。textContentプロパティを使用して、要素のテキスト内容を設定しています。testメソッドを使用して、正規表現が文字列にマッチするかどうかをチェックしています。
応用
このコードを応用して、以下のような処理を行うことができます。
- フォーム入力のバリデーション
- パスワードの強度チェック
- ユーザー名のチェック
英数字のみを許可する他の方法
String.prototype.replace メソッドを使用して、英数字以外の文字を空文字に置き換えることができます。
function isAlphanumeric(str) {
return str.replace(/[^a-zA-Z0-9]/g, "");
}
const input = "abc123-";
const result = isAlphanumeric(input);
console.log(result); // "abc123"
このコードは、[^a-zA-Z0-9] という正規表現を使用して、英数字以外の文字をすべて空文字に置き換えています。
for ループを使用して、文字列内の各文字をチェックし、英数字以外の文字を削除することができます。
function isAlphanumeric(str) {
const result = [];
for (let i = 0; i < str.length; i++) {
if (/^[a-zA-Z0-9]+$/.test(str[i])) {
result.push(str[i]);
}
}
return result.join("");
}
const input = "abc123-";
const result = isAlphanumeric(input);
console.log(result); // "abc123"
このコードは、for ループを使用して、文字列内の各文字をチェックしています。各文字が英数字かどうかを正規表現でチェックし、英数字であれば result 配列に追加しています。最後に、result 配列を結合して、英数字のみを含む文字列を返しています。
ライブラリの使用
英数字のみを許可するライブラリも存在します。例えば、以下のようなライブラリがあります。
これらのライブラリを使用すると、より簡単に英数字のみを許可することができます。
import validator from "validator";
const input = "abc123-";
const isValid = validator.isAlphanumeric(input);
console.log(isValid); // false
- 正規表現は、最も柔軟な方法ですが、複雑な場合もあります。
String.prototype.replaceメソッドは、比較的単純な方法ですが、すべてのケースに対応できるわけではありません。forループは、最も汎用性の高い方法ですが、処理速度が遅くなる可能性があります。- ライブラリは、最も簡単に使用できる方法ですが、ライブラリの追加が必要になります。
javascript regex
