[JavaScript]JSで文字列に日本語が含まれているかチェックする

お問い合わせフォーム等を作成する時、日本語(ひらがな・カタカナ・漢字)のどれかが含まれているかどうかをチェックすることで、スパムであったりbotであったり不正な攻撃であったりをある程度防ぐことができます。そしてPHP側での実装ももちろん必要ですが、JS側でも判定することで少しでもサーバの負荷を減らすことができます。

PHP側は検索するとたくさん出てきたので、今回はJSのみ紹介します。ちなみにJavaScriptそのものしか使って無いので、例はJqueryで書いてますが少し書き方を変えればVueでもReactでも使えます。

判定する関数を作成

まずは以下の関数を作成しましょう。文字列に日本語が含まれていればTrueを、含まれていなければFalseを返します。

    function includeJa(text) {
        try {
            let gmi = 'gmi';
            let regeIncludeHiragana = '^(?=.*[\u3041-\u3096]).*$';
            let regeIncludeKatakana = '^(?=.*[\u30A1-\u30FA]).*$';
            let regeIncludeKanji = '^(?=.*[\u4E00-\u9FFF]).*$';
            let regeHiragana = new RegExp(regeIncludeHiragana, gmi);
            let regeKatakana = new RegExp(regeIncludeKatakana, gmi);
            let regeKanji = new RegExp(regeIncludeKanji, gmi);

            let includeJa = false;
            if (regeHiragana.test(text))
                includeJa = true;
            if (regeKatakana.test(text))
                includeJa = true;
            if (regeKanji.test(text))
                includeJa = true;

            return includeJa;
        } catch (error) {
            alert(error);
        }
    }

変数regeInclude~~~には、「対象文字列を含む」を表す正規表現が渡されています。変数rege~~~は実際に正規表現を使って判定を行うインスタンスです。

gmiは正規表現に関するパラメータです。内容の解説は省略しますが必要なので消さないでください。
そして実際に判定を行うメソッドは.test()です。これは正規表現とマッチしていればtrueを、そうでなければfalseを返すメソッドです。

ここで注意ですが、new RegExpで作成したインスタンスは使い回さない様にしてください。使い回すと結果が変わってしまうことがあります。なので今回は関数内で都度インスタンスを作成しています。

呼び出し方

多分これを使いたい時ってフォームの入力判定だと思うので、その体ですすめます。

この作成した関数をJqueryで呼び出す際は

includeJa($('.form-target').val())

でOK。対象のinputタグにクラス名を付けておき、それを指定してください。val()で入力内容を取得することができます。

まとめ

正規表現で「全てが日本語」のパターンはネット上にたくさんあったのですが、「日本語を含む」は案外なかったですし、あってもイマイチ動かなかったりとなかなか答えが見つからず、最終的には自分で正規表現の書き方を調べました。オリジナルなのでもしかするとうまく判定できないパターンがあるかもしれませんが、その辺りは自己責任でお願いします。。

コメント

タイトルとURLをコピーしました