質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.34%

正規表現 /\P{C}/uをmatchメソッド、pettern属性で使いたい

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,602

k499778

score 542

前回の投稿の続きになります。
https://teratail.com/questions/32811

表題にある通りですが、

正規表現 /\P{C}/uをjsのmatchメソッド、またはhtmlのpettern属性で使うにはどのような書き方をすればいいでしょうか?

現在エラーチェックをしようとしているのですが、以下のような書き方をするとシンタックスエラー、もちろんクオートで囲むと文字列として認識されてしまいうまくいきません。

var reg =  /\P{C}/u;
if(val = match.(reg)){
  alert(”制御文字は入力できません。”);
  return false;
}

pettern属性に関してもpettern属性の使い方はわかるのですが、そこに設定する上記の正規表現の書き方がわからないでいます。

もしわかる方がいらっしゃいましたらお答え頂けると助かります。よろしくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+3

外部のライブラリ
のようなものを使わないと javascriptで \P 使えません

制御文字は入力できませんを出したいなら
/[\x00-\x1f\x7f-\x9f]/ 
とかを検討してみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/20 20:33

    回答ありがとうございます。

    そうなんですね。jsでは \P を使えないと知れただけでもよかったです。


    結果から言うと、phpを使って処理しました。

    ajaxを使ってサーバー側(php)に入力値を飛ばし、preg_matchメソッドで上記の正規表現を使って判定し、
    再度js側で返ってきた判定を使ってアラート処理を行いました。

    アドバイスしていただきありがとうございました。

    キャンセル

+1

JavaScriptの正規表現には、Unicodeプロパティを扱う\p\Pはありません。

JavaScriptで同等なことを実現するには、Unicodeプロパティを調べて、自分で正規表現に書き下ろすほかありません。

また、HTML5のpattern属性も、JavaScriptの正規表現を使うとのことですので、\p\Pは使えません。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/20 20:34

    回答ありがとうございます。

    jsでもhtmlでも上記の正規表現が使えないと早めに知れてよかったです。

    phpに値を飛ばして、そこでバリデーションチェックすることで対応しました。

    キャンセル

+1

コードの要件を推測する限り、正しいJavaScriptコードとHTMLは以下になると思います。

/* 変数valに判定対象の文字列が代入されているものとします */

// Cプロパティを持つUnicode文字1字にマッチするパターン
var reg = /\p{C}/;

// Cプロパティを持つUnicode文字が1文字でも含まれていたら、
// alertを出す
if (reg.test(val)) { 
  alert("制御文字は入力できません。");
  return false;
}
<!-- 値が1字以上で、かつ、Cプロパティを持たないUnicode文字のみで構成されているか判定 -->
<input type=text pattern="^\P{C}+$">

また、それぞれのパターンの意味はPHPのPCRE正規表現を参考に、以下と仮定します。

  • \p{C}:Cプロパティを持つUnicode文字(制御文字など)にマッチするパターン
  • \P{C}:Cプロパティを持たないUnicode文字(制御文字など以外)にマッチするパターン

以上を前提とし、解説していくものとします。


まず、JavaScriptの正規表現には、\p{C}\P{C}などの記述でUnicode文字の範囲を示すことができる「Unicode文字プロパティ」が存在しません。
また、maisumakunさんの解答のとおり、HTMLのpattern属性の正規表現はJavaScriptのものであるため、同じくpattern属性でも存在しません。

このため、そのUnicode文字プロパティが示す範囲の文字にマッチするパターンを直接書かなくてはなりません。
まずは、どちらかと言えば簡単な\p{C}のパターンから解答します。

\p{C}はCプロパティを持つ文字を示すパターンです。このため、Cプロパティの文字にマッチするパターンを自力で書くことになります。
ですが、Unicode文字プロパティの文字集合のデータは、mathiasbynens/unicode-dataで公開されていますので、ここの正規表現をそのまま流用しましょう。
現在(2016年4月20日)はUnicode 8.0.0が最新版であるため、ここではunicode-data/8.0.0/categoriesのデータを利用します。

Cプロパティの正規表現は、unicode-data/8.0.0/categories/C-regex.jsに書かれています。\p{C}の場合は、これをそのまま利用すれば良いわけです。
この正規表現を利用した、正しく動作するJavaScriptコードは以下になります。
(字数制限のため、外部ページとなります)

http://pastebin.com/vs2VrJjB


次に、\P{C}のパターンを解答します。

\P{C}はCプロパティを持たない文字を示すパターンです。
このため、先ほどのパターンの否定にマッチすればいい…のですが、一筋縄ではいきません。

mathiasbynens/unicode-dataでは\P{C}に該当する正規表現は公開されていません。
このため、何かしらの方法で生成しなくてはなりません。
そこで、以下の質問で試みられているのと同じように、mathiasbynens/regenerateを使用して正規表現パターンを生成します。

unicode-data/8.0.0/categories/C-code-points.jsには、Cプロパティの文字一覧が数値によるコードポイントの配列データとして記述されています。
これを、以下のコードで動作させることで、\P{C}の正規表現パターンを生成できます。

var C_code_points = [ /* C-code-points.jsの配列データ */ ];
var rg = regenerate()
  // 全てのUnicode文字を追加
  .addRange(0, 0x10FFFF);

C_code_points
  .forEach(function(code_point) {
    // Cプロパティを持つ文字を順に削除していく
    rg = rg.remove(code_point);
  });

// \P{C} と同じ意味のパターンを生成
console.log(rg.toString());

\P{C}の正規表現パターンは、以下になります。
(字数制限のため、外部ページとなります)

http://pastebin.com/ynhfxiwB

このパターンを利用した、正しく動作するHTMLは以下になります。
(字数制限のため、外部ページとなります)

http://pastebin.com/1PsMXmih

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/20 21:01

    わざわざここまで詳しく解説していただき、また実際のコードも作っていただき大変感謝しています。

    保存版にして何度も読み直します。

    本当にありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る