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

Question

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

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

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

$(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文字以上」ではありません。他の文字数も同様にちょうどが目的です。

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

Answer 1

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

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

Comments

[sandwich]

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

Answer 2

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

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

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

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

Comments

[sandwich]

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

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

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

[papinianus]

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

[sandwich]

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

>一応補足しときますが

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

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

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

ただし、YoutubeのURLですが、

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

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

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

[papinianus]

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

Answer 3

$(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です。');
    }

  }); 
});  

※[^/]での^は、否定（～ではない）の意味です。

Comments

[sandwich]

迅速なご回答に感謝致します。ありがとうございました。

[sandwich]

重ねて申し訳ございませんが、よろしければ【不明な文字数】が間に入る場合というのはあれば教えて頂けませんでしょうか？

'https://example.com/【不明な文字数】/.{10}'

[sandwich]

文字数は「10文字以上」でなく「10文字ちょうど」だとより助かるので、またご存知のことがありましたらぜひ教えてください。

[_lemon2003_]

.{10} は任意の文字( . )を 10 連続という意味なので、それを置き換えたい位置に入れてください。

[sandwich]

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

[reosablo]

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

[sandwich]

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