エンジニアの将来って?

現在6年目の元COBOL現Javaエンジニアが、将来への考えや勉強のアウトプット、たまに腎臓について書くブログです

JavaScriptの正規表現で色々判定

こんにちは。たいらです。
今回の記事はJavaScript正規表現についてのプログラムです。
流れとしては、テキストボックスに文字を入力。
ボタンを押すとテキストボックスの中身が数字か英字かどうかをalertするプログラムです。

フォルダ構成

f:id:Tairax:20170905100411p:plain

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>正規表現サンプル</title>
        <script type="text/javascript" src="../js/sample01.js"></script>
    </head>
    <body>
        <form name="reg_form" id="reg_form_id" action="">
            <input type="text" name="reg_text" id="reg_text_id" value="">
            <input type="button" name="reg_button" id="reg_button_id" value="正規表現テスト" onclick="matchTest();">
        </form>
    </body>
</html>

 JavaScript

function matchTest() {

// テキストボックスに入力された値を取得
    var str = document.forms.reg_form_id.reg_text_id.value;

// 入力されたか判定
    if (str == '') {
        alert('何も入力されていません')
    } else if (str.match(/^[0-90-9]+$/)) {
// 数字が入力されたか判定
        alert('入力したのは数字です');
    } else if (str.match(/^[a-zA-z]+$/)) {
// 英字(小文字大文字含む)が入力されたか判定
        alert('入力したのは英字です');
    }
}

 

最初の画面はこんな感じです。

f:id:Tairax:20170905100742p:plain

スタイルを特にいじってないのでシンプルな画面です。
テキストボックスに何か入力してalertさせます。

まず数字を入力します。

f:id:Tairax:20170905100906p:plain

正規表現テスト」ボタンを押します。

f:id:Tairax:20170905100921p:plain

数字とalertしてくれました。
正規表現のイメージはこんな感じです。

f:id:Tairax:20170905101826p:plain

 

次に英字を入力します。

f:id:Tairax:20170905100945p:plain

正規表現テスト」ボタンを押します。

f:id:Tairax:20170905101001p:plain

英字とalertしてくれました。
正規表現のイメージはこんな感じです。

f:id:Tairax:20170905101903p:plain

 

参考にさせて頂いたサイト様