お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

あなたが入力した文字はこれなので、こうなります。

正規表現です。文字列検索系で使うものです。
パターンを記述してそのパターンに一致するかどうか的なことを書くのですが。
見た目が完全呪文なので、かなりとっつきにくいものとなっています。
ただ便利なのである程度は覚えるようにしましょう
まぁ、パターン化させてコピペに落ち着くと思う

基本形

ルールとして以下の記述方法となります。
例ではreplaceですが、書き方は共通です。

$(function()
{
 str.match(/【正規表現パターン】/【オプション】);
});

上記では正規表現パターンにマッチしてんのかどうかをチェックしています。
正規表現パターンは半角スラッシュで必ず囲みます。

正規表現パターン

正規表現パターンについてやっていきます。
基本的に記号が何かしらの意味をもつものとなります。

^

これをつけることで、先頭から始まっているの意味となります。

$(function()
{
 str.match(/^【正規表現パターン】/【オプション】);
});

$

これをつけることで、その文字で終わっているの意味となります。

$(function()
{
 str.match(/^【正規表現パターン】$/【オプション】);
});

$

これをつけることで、その文字で終わっているの意味となります。

$(function()
{
str.match(/^【正規表現パターン】$/【オプション】);
});

*

これをつけることで、直前の文字を0回以上繰り返ししているものの意味となります。

$(function()
{
  var str1Arr = ["Google",'Gooooooogle','Ggle','gtagle','Ggleeeee'];
  console.log(str1Arr[0].match(/Go*gle/)); // 一致する
  console.log(str1Arr[1].match(/Go*gle/)); // 一致する
  console.log(str1Arr[2].match(/Go*gle/)); // 一致する
  console.log(str1Arr[3].match(/Go*gle/)); // 一致しない
  console.log(str1Arr[4].match(/Go*gle/)); // 一致する
});

さてさて、なにいってだこいつ感が否めない所にきましたかね。
【*】は【直前の文字】を【0回以上繰り返しているもの】ですね
例では 【Go*gle】となっているので、直前は o です。
【*】は【o】を【0回以上繰り返しているもの】となります
まず、Gがあって、次oはなくてもいいし何回も繰り返してもいいや。んで、そこからgleが続くんや
という日本語意味になります。

+

これをつけることで、直前の文字を1回以上繰り返ししているものの意味となります。
*は含んでなくてもいいや、っていうてくれますが、+は無いとダメなようですね。

$(function()
{
 var str1Arr = ["Google",'Gooooooogle','Ggle','gtagle','Ggleeeee'];
 console.log(str1Arr[0].match(/Go+gle/)); // どうなる?
 console.log(str1Arr[1].match(/Go+gle/)); // どうなる?
 console.log(str1Arr[2].match(/Go+gle/)); // どうなる?
 console.log(str1Arr[3].match(/Go+gle/)); // どうなる?
 console.log(str1Arr[4].match(/Go+gle/)); // どうなる?
});

?

これをつけることで、直前の文字を0回または1回あるものの意味となります。
無くてもいいけど、1個だけなら許してあげるやで という意味です

$(function()
{
 var str1Arr = ["Google",'Gooooooogle','Ggle','gtagle','Ggleeeee'];
 console.log(str1Arr[0].match(/Go?gle/)); // どうなる?
 console.log(str1Arr[1].match(/Go?gle/)); // どうなる?
 console.log(str1Arr[2].match(/Go?gle/)); // どうなる?
 console.log(str1Arr[3].match(/Go?gle/)); // どうなる?
 console.log(str1Arr[4].match(/Go?gle/)); // どうなる?
});

{n}

n部分は整数を指します。
これをつけることで、直前の文字をn回繰り返すの意味となります。
回数は固定となります。

$(function()
{
 var str1Arr = ["Google",'Gooooooogle','Ggle','gtagle','Ggleeeee'];
 console.log(str1Arr[0].match(/Go{2}gle/)); // どうなる?
 console.log(str1Arr[1].match(/Go{2}gle/)); // どうなる?
 console.log(str1Arr[2].match(/Go{2}gle/)); // どうなる?
 console.log(str1Arr[3].match(/Go{2}gle/)); // どうなる?
 console.log(str1Arr[4].match(/Go{2}gle/)); // どうなる?
});

{n,}

n部分は整数を指します。
これをつけることで、直前の文字をn回以上繰り返すの意味となります。
{1,}は+と同じ動きになります。
{0,}は*と同じ動きになります。

$(function()
{
var str1Arr = ["Google",'Gooooooogle','Ggle','gtagle','Ggleeeee'];
console.log(str1Arr[0].match(/Go{2,}gle/)); // どうなる?
console.log(str1Arr[1].match(/Go{2,}gle/)); // どうなる?
console.log(str1Arr[2].match(/Go{2,}gle/)); // どうなる?
console.log(str1Arr[3].match(/Go{2,}gle/)); // どうなる?
console.log(str1Arr[4].match(/Go{2,}gle/)); // どうなる?
});

{n,n2}

nとn2部分は整数を指します。
これをつけることで、直前の文字をn回以上n2回まで繰り返すの意味となります。
{0,1}は?と同じ動きになります。

$(function()
{
var str1Arr = ["Google",'Gooooooogle','Ggle','gtagle','Ggleeeee'];
console.log(str1Arr[0].match(/Go{3,4}gle/)); // どうなる?
console.log(str1Arr[1].match(/Go{3,4}gle/)); // どうなる?
console.log(str1Arr[2].match(/Go{3,4}gle/)); // どうなる?
console.log(str1Arr[3].match(/Go{3,4}gle/)); // どうなる?
console.log(str1Arr[4].match(/Go{3,4}gle/)); // どうなる?
});

.

"\n" を除く任意の 1 文字に一致します。
なかなかにややこしいものであります。
ドットに続く文字が一致するのではないです。あくまでもパターンなのを理解すると
モヤモヤは晴れるはずです。
たぶんね、これみんなそう言うてるけど言い回しが悪いと思うのです。
【改行以外は何でもいいから前に一文字だけ置いておいてください】的な。うん。難しい

$(function()
{
var str1Arr = ["google",'goagle','gooogle','gogle','Ggleeeee'];
console.log(str1Arr[0].match(/go.gle/)); // 一致する
console.log(str1Arr[1].match(/go.gle/)); // 一致する
console.log(str1Arr[2].match(/go.gle/)); // 一致しない
console.log(str1Arr[3].match(/go.gle/)); // 一致しない
console.log(str1Arr[4].match(/go.gle/)); // 一致しない

// ちなみに
var str1Arr = ["google",'gooooooogle','ggle','gtagle','Ggleeeee'];
console.log(str1Arr[0].match(/.g/)); // 一致する
console.log(str1Arr[1].match(/.g/)); // 一致する
console.log(str1Arr[2].match(/.g/)); // 一致する
console.log(str1Arr[3].match(/.g/)); // 一致する
console.log(str1Arr[4].match(/.g/)); // 一致する

});

1つ目の例上から順番になんでそうなるのか

  1. google→[go]o[gle]→お、goとgleの間に1文字だけあるやんけ。おっけーやで
  2. goagle→[go]a[gle]→お、goとgleの間に1文字だけあるやんけ。おっけーやで
  3. gooogle→[go]oo[gle]→ホゲッ・・・goとgleの間に1文字以上あるやんけ。これは許されへんやろなぁ
  4. gogle→[go][gle]→ホゲッ・・・goとgleの間に1文字もないやん!これは許されへんやろなぁ
  5. Ggleeeee→[go][gle]→goがないだろ!いい加減にしろ!

2つ目の例上から順番になんでそうなるのか

  1. google→[og]→お、gの前にoあるやん。ええんやで
  2. gooooooogle→[og]→お、gの前にoあるやん。ええんやで
  3. ggle→[gg]→お、gの前にgあるやん。ええんやで
  4. gtagle[ag]→お、gの前にaあるやん。ええんやで
  5. Ggleeeee[Gg]→お、gの前にGあるやん。ええんやで

(pattern)

マッチするグループを作成し、かつ一致したものは$1...$9プロパティを使用して取得することができます。
(´・ω・`)???
この$1等の謎変数に関してはreplaceの時によく利用します。
ちなみに変数とか言うてますが、JSの変数として扱うと当然エラーが出ます。
正確には置換文字となります。
グループは複数作る事ができます。

$(function()
{
 var str1Arr = ["googleoogoogoog",'goagle','gooogle','gogle','Ggleeeee'];
 console.log(str1Arr[0].replace(/(oog)/,'####'+$1+'####')); // これはエラーがでる $1はJS側から見て未定義
 console.log(str1Arr[0].replace(/(oog)/,'####$1####')); // 正常に動作する。oogを####oog####に置換する

 // 複数の場合
 console.log(str1Arr[0].replace(/(oo)(l)/,'#$2###$1####-----')); // 動作しない
 console.log(str1Arr[0].replace(/(oo)(go)/,'#$2###$1####-----')); // 動作する

});

複数指定の場合の解説
これ、複数のグループといっても、各自独立しているわけではないのです
この書き方では続いている文字列として認識されるのです。
/ool/と/(oo)(l)/の違いとしては
前者は各単語毎で区切られる 後者は各()毎で区切られる
と言うことになります。

上記を踏まえると、動作しない複数のものは一目瞭然ですね。
oolなんて単語はないのですから。そりゃ動かないです。

で2番目 oogoは存在していますので、置換処理が走ります。
置換する文字として #$2###$1####----- と指定されています。
1番目のパターンは、$1に
2番目のパターンは、$2にそれぞれ対応しますので
上記正規表現通りに書き直すならば #go###oo####----- となります。
というわけで、
googleoogoogoog

google#go###oo####-----ogoog
になるっということです。

もういっちょ。
(pattern)を(?:pattern)とすることで、$1等で使えなくなります。
バック側での無駄処理を省きたいときはこの書き方が正となります。

(?=pattern)

肯定先読み、です。
patternで指定した文字が続く場合に一致した、とみなされます。
このパターンでは、マッチした文字列は記憶されず使えないのも特徴です。
またマッチして対象になるのは、(?=pattern)の前に記述されている文字列です。

$(function()
{
 var str1Arr = ["googleoogoogoog",'goagle','gooogle','gogle','Ggleeeee'];
 console.log(str1Arr[0].replace(/goo(?=gle)/,'#')); // #gleoogoogoog
});

解説です。
上記例では
googleoogoogoog

#gleoogoogoog
と変化しました。
gooという文字の後にgleとなっていればgooを対象とする みたいな感じでしょうか。
Windows(?=95|98|NT|2000) という例を出しているサイトもありますが。こいつはわかりやすいですね。
ちなみに、|は後述しますが、orの意味となります。

(?!pattern)

否定先読み、です。
肯定先読みの逆で、pattrenに続かない、という事になります。
否定か肯定かの差だけですので、これくらいにします、

x|y

早速登場しました、orです。どちらかに一致すればという意味になります。

$(function()
{
 var str1Arr = ["googleoogoogoog",'goagle','gooogle','gogle','Ggleeeee'];
 console.log(str1Arr[0].replace(/e|o/,'#')); // g#ogleoogoogoog
});

[abc]

複数のorの場合はこいつを使います。
上記の場合は、aかbかcとなります。

$(function()
{
 var str1Arr = ["googleoogoogoog",'goagle','gooogle','gogle','Ggleeeee'];
 console.log(str1Arr[0].replace(/[rql]/,'#')); // goog#eoogoogoog
});

[^abc]

除外する指定方法です。
つまり[^abc]ならば、aとbとc以外に一致という意味となります。

$(function()
{
 var str1Arr = ["googleoogoogoog",'goagle','gooogle','gogle','Ggleeeee'];
 console.log(str1Arr[0].replace(/[goog]/,'#')); // goog#eoogoogoog
});

[a-z]

範囲指定を行います。
a-zなら半角aから半角zまでが対象となります。
以下よく使う範囲指定を置いておきます。
ちなみに [^a-z]とすると半角英字小文字以外という意味になりますね。

半角英字小文字のみ

[a-z]

半角英字大文字のみ

[A-Z]

半角英字小文字大文字のみ

[a-zA-Z]

半角数字のみ

[0-9]

半角英数字小文字大文字のみ

[0-9a-zA-Z]

全て全角ひらがなかどうか

[ぁ-ん]

全て全角カタカナかどうか

[ァ-ン]

全て半角カタカナかどうか

[ァ-ン゙゚]

\s

スペース、タブ、フォームフィードなどの任意の空白文字と一致します。[ \f\n\r\t\v] と同じ意味になります。

$(function()
{
  var str1Arr = ["おら 東京さいぐだ","おら東京さいぐだ"];
  console.log(str1Arr[0].replace(/おら\s/,'#')); // #東京さいぐだ
  console.log(str1Arr[1].replace(/おら\s/,'#')); // おら東京さいぐだ
});

\シリーズは略式系が多いです。数値とか。
あえてしませんが、ググって探しておいてください。

オプション

これまで正規表現パターンとして色々やってましたが
最後に重要なオプションについてやっていきます。
g i m o s x がありますが。今回は gとiだけ。
他については触れませんが、見ておいてください。
/ptn/【オプション記述位置】
が基本となります。

g

繰り返してマッチします。

$(function()
{
 var str1Arr = ["googleoogoogoog"];
 console.log(str1Arr[0].replace(/o/,'#')); // g#ogleoogoogoog
 console.log(str1Arr[0].replace(/o/g,'#')); // g##gle##g##g##g
});

i

大文字と小文字を区別しなくなります。

$(function()
{
var str1Arr = ["gooGleoogooGoog"];
console.log(str1Arr[0].replace(/g/g,'#')); // #ooGleoo#ooGoo#
console.log(str1Arr[0].replace(/g/gi,'#')); // #oo#leoo#oo#oo#
});