今回はJavaScriptと正規表現を使って本文中に特定の文字列が含まれているかどうかを調べる方法を紹介します。
検索の仕組みの基本的な方法なので、しっかり覚えておきましょう。
こんな場合に使用
- ある文字列を見つけたい
- TELもしくはMAILの2重チェックをしたい
- 条件にマッチした文字列を検索したい
難易度(MAX10) | ★★★★★☆☆☆☆☆ |
JSと正規表現で特定の文字列が含まれているかを調べる方法
JavaScriptで特定の文字列を検出するには正規表現の.test()を使用します。
/パターン/.test(文字列) | 文字列がパターンとマッチするか |
例えば、
/A/.test(‘ABC’);の場合は「ABC」に「A」含まれているのでtureになります。
/D/.test(‘ABC’);の場合は「D」は含まれないのでfalseになります。
実際の使い方は以下です。
const test1 = /J/.test('JavaScript');
const test2 =/^iP/.test('iPhone');
const test3 =/\d/.test('鈴木');
const test4 =/鈴.*郎/.test('鈴木一郎');
const test5 =/\d+-\d+-\d+/.test('090-0000-1111');
console.log(test1)
console.log(test2)
console.log(test3)
console.log(test4)
console.log(test5)

以下のサンプルは、ハイフンありなし、携帯電話or固定電話の電話番号になっているかどうかを判断する正規表現を使った、簡易的な電話番号チェック機能です。
(悪戯防止のためにほとんどのフォームには使用されているので意味を覚えましょう。)
HTML
<h2>電話番号を入れて下さい</h2>
<input id="TelNumberText" placeholder="電話番号" type="tel">
<p id="Message"></p>
JavaScript
const TelNumberText = document.querySelector('#TelNumberText');
const Message = document.querySelector('#Message');
TelNumberText.addEventListener('keyup' , () => {
const TelNumber = TelNumberText.Value;
const trimeTelNumber = TelNumber.replace(/[━.*‐.*―.*-.*\-.*ー.*\-]/gi,'');
if (/^(0[5-9]0[0-9]{8}|0[1-9][1-9][0-9]{7})$/).test(trimeTelNumber) === false) {
Message.innerHTML = '電話番号を正しく入力して下さい';
} else {
Message.innerHTML = '';
}
});
以下の様な感じに間違ったテキストを入力するとエラー文が表示されます。

以上が「正規表現で特定の文字列が含まれているか調べる方法」でした。
以下はJavaScriptで良く使われる正規表現まとめです。参考にしてみて下さい。