正規表現確認サイトとブラウザ確認で挙動が異なる

###前提・実現したいこと
正規表現を用いて入力された値が正しい値かどうか判別を行いたい。
今回は「半角英字 + 半角空白 + 半角英字」かどうか判別。
イメージとしてクレジットカードの名義人形式です。

###該当のソースコード

html
1<!DOCTYPE html>
2<html>
3  <head>
4  <meta charset="utf-8" />
5  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
6  <title>test</title>
7</head>
8<body>
9  <input type="text" value="" name="test">
10  <input type="button" value="click" name="btn">
11  <script type="text/javascript">
12    $("input[name=btn]").on("click", function(){
13        var a = $("input[name=test]").val();
14
15        if(a.match("/^[A-Z]+\s[A-Z]+$/")){
16            alert(a + "：成功");
17        } else {
18            alert(a + "：失敗");
19        }
20    });
21  </script>
22</body>
23</html>

###試したこと
http://www.regexpal.com/より、正規表現形式はこれで問題なさそうというのは確認済
ただしブラウザを立ち上げて同様にチェックを行うとチェック結果が失敗となる。
JS側の問題？

###補足情報(言語/FW/ツール等のバージョンなど)
正規表現に関しては正直あまり詳しくありません。資料等見ながら作成しましたがうまくできていないので、アドバイスを頂けると幸いです。

行動規範の内容に同意します

回答4件

\s

既出の回答通り、ご質問の状況は下記コードで改善できるのですが、

JavaScript
1/^[A-Z]+\s[A-Z]+$/

\s は Unicode 上で空白と認識可能な全ての文字なので、全角空白も含みます。

JavaScript
1console.log(/^[A-Z]+\s[A-Z]+$/.test('A　B'));  // true

この挙動は「半角空白」の要件に反するので、半角空白を指定する事をお勧めします。

改善案

半角英小文字にも対応するなら、下記コードになります。

JavaScript
1var reg = /^[A-Za-z]+ [A-Za-z]+$/;
2console.log(reg.test('A B')); // true
3console.log(reg.test('a b')); // true
4console.log(reg.test('A　B')); // false
5console.log(reg.test('a　b')); // false

Re: vnsa7221 さん

投稿2017/08/09 05:54

編集2017/08/09 06:00

think49

総合スコア18194

ベストアンサー

間違い
a.match("/^[A-Z]+\s[A-Z]+$/")

正しい
a.match(/^[A-Z]+\s[A-Z]+$/)

投稿2017/08/09 04:26

momf

総合スコア416

vnsa7221

2017/08/09 05:29

momfさんご回答ありがとうございます。渡し方に問題があったのですね。勉強不足でした。修正したところ希望通りの挙動になることが確認できました。ご回答いただきありがとうございました。

行動規範の内容に同意します

javascriptの正規表現は文字列をわたすのではありません

a.match("/^[A-Z]+\s[A-Z]+$/")
↓↓↓
a.match(/^[A-Z]+\s[A-Z]+$/)

文字列として与えたいのであればRegExpを利用して下さい

javacript
1var pattern=new RegExp("^[A-Z]+\s[A-Z]+$");
2a.match(pattern);

regexpの際はデリミタ不要でした。修正しました

投稿2017/08/09 04:23

編集2017/08/09 05:36

yambejp

総合スコア117640

yambejp

2017/08/09 04:29

ちなみにjavascriptの正規表現はPerl互換ほどインテリジェントではありませんので高度なチェックをしても微妙に仕様が異なる場合があります必要にあわせていろいろ微調整してください

vnsa7221

2017/08/09 05:31

yambejpさんご回答ありがとうございます。渡し方に問題があったのですね。勉強不足でした。文字列で渡したい場合はその方法もあるのですね。初めて知りました。修正したところ希望通りの挙動になることが確認できました。ご丁寧に様々なアドバイスありがとうございます。

退会済みユーザー

2017/08/09 05:44

横からすみません。 > ちなみにjavascriptの正規表現はPerl互換ほどインテリジェントではありませんこれって何処かにまとまった記述があったりしますか？

think49

2017/08/09 05:57

特に Perl に詳しいわけではありませんが、やはり公式ドキュメントを参照するのが最良ではないでしょうか。 http://perldoc.perl.org/perlre.html http://perldoc.perl.org/perlreref.html

退会済みユーザー

2017/08/09 06:08

ありがとうございました！ javascriptの正規表現が'劣っている'と読み取ってしまったのですが、Perl互換が`賢い`という表現だったのですね。ちょっと読み違えていたようです。いろいろ勉強になりました。

yambejp

2017/08/09 06:19

一番大きいのは後読み（戻り読み）機能がないことですねついクセでやってしまうとエラーになってしまうことがありますあとは\Aとか\Zとかよく使われるマッチングパターンへの互換がよわいです

退会済みユーザー

2017/08/09 06:24

JavaScript の正規表現は割と使うので、念のため、ドキュメントを読み直してみます。コメントありがとうございます。

think49

2017/08/09 06:56

> javascriptの正規表現が'劣っている'と読み取ってしまったのですが、その認識で合っていると思いますが、私としてはPerlのリファレンスとJavaScriptのリファレンスを比較すれば一目瞭然かなと。 Perlは日本語訳もあるようです。 http://perldoc.jp/docs/perl/5.10.0/perlretut.pod http://perldoc.jp/docs/perl/5.22.1/perlrequick.pod 今紹介されていない機能で、読んでいて目に付くのは「相対後方参照」「名前付き後方参照」「選択捕捉グループ番号付け」「絶対最大量指定子」ですね。ネストされたパターンが扱いやすくなり、バックトラックを制御できるのは良いと思います。 (残念ながら繰り返し回数を変数にキャッシュする事は不可能なようで「対応する括弧にマッチする正規表現」は無理なようですが) JavaScriptでこれらの機能が取り込まれれば、String#replace や RegExp#exec を使用する回数は間違いなく減ると思います。

退会済みユーザー

2017/08/09 07:13

> JavaScriptでこれらの機能が取り込まれれば、String#replace や RegExp#exec を使用する回数は間違いなく減ると思います。ちょっと理解できませんでした。どういうことでしょうか？

think49

2017/08/09 07:34

例えば、名前付き後方参照は分かりやすい事例だと思うのですが、JavaScriptで一度の正規表現のマッチで解決する方法はありますか。 http://perldoc.jp/docs/perl/5.10.0/perlretut.pod#Named32backreferences

退会済みユーザー

2017/08/09 07:52

コメントありがとうございます。が、ちょっとまだ理解できないので、新しく質問建てます＾＾； vnsa7221 さん、yambejp さん、お騒がせして申し訳ありません！

退会済みユーザー

2017/08/09 08:01

新しく質問を建てました。 https://teratail.com/questions/87632 もう少しお付き合いいただけると幸いです。