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

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

ただいまの
回答率

89.12%

JS配列に【未定の文字列】を入れて判定する方法

受付中

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,142

sandwich

score 12

URL入力フォームのバリデーションにおいて、【未定の文字列】を配列に入れることはできますか?

下記の【未定のXX文字】や【不明な文字数】のイメージでURLのホワイトリストを登録したいのですが、何か良い方法はありませんでしょうか?

パターンは➀から➃まで4つございますが、1つでも構いませんのでご存知でしたらぜひ教えてください。

$(function(){
  $('#input').focusout(function() { 

    //ホワイトリスト
    var inputVal = $(this).val();
    var whitelist = [
        'https://example.com/【未定の8文字】',                   //パターン➀
        'https://example.net/【未定の17文字】/?t=',              //パターン➁
        'https://example.biz/【不明な文字数】/【未定の10文字】'];  //パターン➂
        'https://example.xyz/【未定の15文字】/【不明な文字数】'];  //パターン➃
    var regex = new RegExp(whitelist.join('|'));  

    //条件判別  
    if ( !(regex.test(inputVal)) ) {
      alert('許可されていないURLです。');
    }

  }); 
});  


※ただし、たとえば【未定の10文字】なら「10文字ちょうど」であって、「10文字以上」ではありません。他の文字数も同様にちょうどが目的です。

難しい条件ですが、宜しくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

+2

$(function(){
  $('#input').focusout(function() { 

    //ホワイトリスト
    var inputVal = $(this).val();
    var whitelist = ['^https://example.com/.{10}$',
                     '^https://example.net/.{20}$'];
    var regex = new RegExp(whitelist.join('|'));

    //条件判別  
    if ( !(regex.test(inputVal)) ) {
      alert('許可されていないURLです。');
    }

  }); 
});  

正規表現では .{文字数} で文字数を指定できます。


 追記1

指摘にありました通り、正規表現は基本的に一部でもマッチすれば、trueなので、前後に余計な文字がついてはいけないのであれば、正規表現の先頭には^、末尾には$をつけてください。


 追記2

今のコードでは、/も、文字としてカウントしてしまうので、

$(function(){
  $('#input').focusout(function() { 

    //ホワイトリスト
    var inputVal = $(this).val();
    var whitelist = ['^https://example.com/[^/]{10}$',
                     '^https://example.net/[^/]{20}$'];
    var regex = new RegExp(whitelist.join('|'));

    //条件判別  
    if ( !(regex.test(inputVal)) ) {
      alert('許可されていないURLです。');
    }

  }); 
});  

[^/]での^は、否定(~ではない)の意味です。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/09/05 02:14

    ありがとうございます。そのように致します。「ちょうど」は探してもなさそうでしたね。

    キャンセル

  • 2018/09/05 03:04

    正規表現の先頭に"^"、末尾に"$"が必要だと思います。(例: '^https://example.com/.{10}$') これが無いと部分一致になってしまうため、10文字以上でもマッチしてしまいます。
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions#special-dollar

    キャンセル

  • 2018/09/05 06:45

    reosabloさま、助かりました。どうもありがとうございます。

    キャンセル

+2

https://example.net/([^/]/)?.{10}で、「不明な文字数と/のペア」がないか、または1回だけ存在するときを許容できます。

--
要件変わったので追記
それぞれこんな感じかと

        'https://example.com/[^/]{8}',                   //パターン➀
        'https://example.net/[^/]{17}/?t=',              //パターン➁
        'https://example.biz/[^/]+/.{10}'];  //パターン➂
        'https://example.xyz/[^/]{15}/[^/]+'];  //パターン➃


一応補足しときますが、質問での未定の文字数っていうのをスラッシュ以外の任意の文字の繰り返し、であって最低でも一文字は必要と解釈してます。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/09/04 02:20

    パターン➂ですね。「/のペア」まで考えてくださってどうもありがとうございます。

    その場合、「【不明な文字数】/【未定の10文字】」となるのですが、「/」はどこに居れればよろしいでしょうか?

    https://example.net/([^/]/)?.{10}

    https://example.net/([^/]/)?/.{10}
    でよろしいでしょうか?

    キャンセル

  • 2018/09/04 10:52

    誤解してたのと、パターン増えたので書き直しました

    キャンセル

  • 2018/09/05 02:14

    突然パターン追加してしまい失礼致しました。それぞれに対応可能なコードをありがとうございます。

    >一応補足しときますが

    はい、お気遣い感謝致します。

    [^/]
    というのは
    スラッシュ以外
    という意味なのですね。

    さて、ほぼできてきました。

    ただし、YoutubeのURLですが、

    この条件が動作せず、
    'https://www.youtube.com/watch?v=[^/]{11}',

    こちらではきちんと動作するのですが、
    'http://youtu.be/[^/]{11}',

    イコールが入っているとできないなどの理由はありますでしょうか?

    キャンセル

  • 2018/09/06 10:12

    例えばですが、google chromeのdeveloper toolでは、"https://www.youtube.com/watch?v=HX_Y6P_eQbA".match(/https:\/\/www.youtube.com\/watch\?v=[^/]{11}/);でマッチすることができます。
    =よりも?や/といった、正規表現で特殊な記号に適切なエスケープができているかが問題かと思います。

    キャンセル

+2

バリデーションなのであれば、「URL/URI として使用可能な文字がX文字(or任意数)続く正規表現」を記述する必要があります。
使用可能な文字は関連 RFC を確認してください。

ただ、それ以前にちゃんと正規表現を学習したほうが良いですよ。。。
正規表現

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/09/05 03:16

    ありがとうございます。お叱り、ごもっともだと思います。先が長いです…

    キャンセル

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

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