new RegExp("^" + input);について

Question

jsでnew RegExpは正規表現として扱えるようですが、//で囲まないでも正規表現と扱えるのですか？解説していただけると助かります。

var fruits = ['apple', 'apricot', 'avocado', 'blueberry', 'cherry', 'coconut', 'cranberry', 'dragonfruit', 'durian', 'grape', 'grapefruit', 'guava', 'kiwi fruit', 'lemon', 'lime', 'lychee', 'mango', 'melon', 'watermelon', 'miracle fruit', 'orange', 'bloodorange','clementine','mandarine','tangerine','papaya','passionfruit','peach','pear','persimmon','physalis','plum/prune','pineapple','pomegranate','raspberry','rambutan','star fruit','strawberry'];

$(function() {
  var list = $("#list");

  function appendList(word) {
    var item = $('<li class="list">').append(word);
    list.append(item);
  }

  $("#submit").on("click", function() {
    var input = $("#keyword").val();
    var reg = new RegExp("^" + input);

    $(".list").remove();

    $.each(fruits, function(i, fruit) {
      if (fruit.match(reg)) {
        appendList(fruit);
      }
    });

    if ($(".list").length === 0) {
      appendList("一致する果物はありませんでした");
    }
  });
});

regの値は^inputとなっていると思うのですが、/^input/とする必要はないのですか？

Answer 1

仕様より

/ab+c/i;

new RegExp('ab+c', 'i');
new RegExp(/ab+c/, 'i');

が等価です。
/で囲むというのは正規表現リテラルを書く方法で、RegExpのコンストラクタは第一引数に文字列型もしくは正規表現型を受け付け、文字列型を受けとった場合には、それを正規表現のパターンとして解釈する仕組みをもっている、ということになりますね。

Comments

[退会済みユーザー]

("^" + input)は文字列リテラルのため//が必要なかったのですね。第一引数でも正規表現リテラルだった場合には//をつけるという解釈でよろしいでしょうか？

[papinianus]

すみません。不正確だったので改めました。
("^"+input)は文字列ですが文字列リテラルではないです。"^"は文字列リテラルです。正規表現表現リテラルだったら/をつけるのではなく、/で囲まれた文字が正規表現リテラルです。"で囲むと文字列、[]で囲むと配列、{}で囲むとオブジェクトになるのと似た感じです。
第一引数が正規表現リテラルだったらRegExpのコンストラクタは何もしないと思います。

[退会済みユーザー]

なんとなく理解できてきました！詳しくありがとうございます。

[think49]

To: minaraiengineer さん
> RegExpのコンストラクタは第一引数に文字列型もしくは正規表現型を受け付け、文字列型を受けとった場合には
papinianus さんは「正規表現型」と書いていますが、こちらはES2018で規定される7種の「データ型(Data Types)」とは別概念の「通称」ですので、注意して下さい。
http://www.ecma-international.org/ecma-262/9.0/#sec-ecmascript-data-types-and-values
(この辺りを区別なく覚えた方のよくある質問で「正規表現型とオブジェクト型を区別する方法を教えて下さい」があり、後から補正するのは非常に厄介なので、学び始めの内から頭に入れておくことをお勧めします)

JavaScript関係の説明文には扱うレイヤーによって、様々な「～型」があり、これが大変な混乱を呼び起こします。
「/foo/は正規表現型(通称)であり、正規表現リテラル(正式名称)であり、Object型(正式名称)であり、Reference型(正式名称)である。」
この文章は間違っていませんが、初めの正規表現型を後ろのObject型と同じレイヤーの概念として認識して誤解が生じる事があります。
「正規表現型(通称)」は [[Prototype]] や instanceof 演算子を見て判断できる名称ですが、それを正確に理解しないと、泥沼にはまります。
Object.getPrototypeOf(/foo/) === RegExp.prototype; // true
/foo/ instanceof RegExp; // true

Answer 2

/pattern/mi→new RegExp("pattern","mi")
のような対比になります。
デリミタは必要ありません

メリット

RegExpコンストラクタを利用する場合のメリットはインスタンスに
マッチした情報が保持されることです。

var reg=new RegExp("a.+b","g");
var str="000a111b222";
if(x=reg.exec(str)){
  console.log(x);
  console.log(reg.lastIndex);
}

Comments

[退会済みユーザー]

回答ありがとうございます！参考になります。

[papinianus]

リテラルで書いても、正規表現オブジェクトなので、下記も等価だと思います。
```javascript
var reg= /a.+b/g;
var str="000a111b222";
if(x=reg.exec(str)){
console.log(x);
console.log(reg.lastIndex);
}
```
メリットで言うなら、正規に「/」が頻出したとき見易いというのが考えられると思います。

[yambejp]

あ、コンストラクタという意味では同じですね
失礼しました