[js]replaceの書き方、正規表現

replaceのRegExpの書き方(アロー関数で短く各書き方)、正規表現のパターンいくつか(全部ではない)。 色付きにしてるので多少は見やすいと思います。
# replace
JavaScriptで検索して置き換える`replace`の書き方。
`new RegExp`は`正規表現`と言われるやつで、今回の記事は`new RegExp`での書き方でより短かく書く書き方のメモ。もっと云うと`function`部を`アロー関数`で書いて全体的に短く書けるんだね、ということ。

＊動的に正規表現を作成
　<font color=hotpink>『new RegExp()』を使うと<font color=#2E64FE>配列や変数</font>から正規表現を作成可 　</font>


＊gフラグ：全文検索
該当するもの全部置き換え(gフラグがなかったら該当する最初の1コのみ)。
実際のコードで使うときgフラグ使ってることもあり、この記事ではgフラグも当たり前にある感じで話を進めます。

## replace書き方：2種+1
(1) 通常の：
**replace( <font color=seagreen>/</font><font color=darkgray>△△</font><font color=seagreen>/g</font>, '<font color=darkgray>〇〇</font>');**

正規表現は「<font color=seagreen>/ (スラッシュ)</font>」で囲むので「<font color=seagreen>/</font><font color=darkgray>△△</font><font color=seagreen>/g</font>」。△△が置き換え前で、〇〇が置き換え後。△△や〇〇にはズバリ置き換え前の文字列を記述する。変数や配列は使えない。『え...、不便じゃね？』『配列や変数使えてナンボじゃねーの？？』てことなので、replaceで<font color=#2E64FE>配列や変数</font>を使いたい場合は<font color=hotpink>new RegExp()</font>使う。

　
(2) new RegExpの：<font color=darkgray>function処理結果が置き換え後</font>
**replace( new RegExp(<font color=#2E64FE>□□</font>, 'g'), <font color=seagreen>function(){return 〇〇; }</font> );**

　
(3) new RegExpでより短いの：<font color=darkgray>function部をアロー関数で省スペース化</font>
**replace( new RegExp(<font color=#2E64FE>□□</font>, 'g'), <font color=seagreen>()=> 〇〇</font> );**

記号<font color=#2E64FE>□□</font>は配列とか変数。『RegExpのfunctionもアロー関数で書いちゃっていいのかな？動くのかな？？』と相当の時間差で思い至った。動くなら1行あたりかなりの省スペース化具合...！！(<font color=seagreen>緑色のヶ所</font>)。

　
# 正規表現
全部ではなくいくつか。個人的に『???』なやつも入れてる(いつか分かる日が来るのか...)

## いくつか実際の例

### ■具体例1：コメントアウト
<font color=darkgray>この例では「//」か「#」がコメントアウト始まり行</font>

__コメントアウト行(行そのもの)__
**<font color=seagreen>/</font><font color=#eb6101>(^\s\*</font><font color=#B168A8>\\</font>/<font color=#B168A8>\\</font>/<font color=#eb6101>.\*</font>\n<font color=#2E64FE>|</font><font color=#eb6101>^\s\*</font>#<font color=#eb6101>.\*</font><font color=#6A1435>\\</font>n<font color=#eb6101>)</font><font color=seagreen>/g</font>**
<font color=darkgray>«解説»
・行の先頭(「^」)に半角スペースが0回以上あって(「\s*」)
・「//」or「#」 …or(「|」を書いて)以下任意で追加可
・のあとに何らかの文字が0文字以上あり(「.*」)
・最後に改行コード(「\\n」)がある</font>

__コメントアウト部分(何か書いた後のコメントアウト)__
**<font color=seagreen>/</font><font color=#eb6101>(</font><font color=#B168A8>\\</font>/<font color=#B168A8>\\</font>/<font color=#eb6101>.\*</font>\n<font color=#2E64FE>|</font><font color=#eb6101></font>#<font color=#eb6101>.\*</font><font color=#6A1435>\\</font>n<font color=#eb6101>)</font><font color=seagreen>/g</font>**
<font color=darkgray>«解説»
・「//」or「#」から始まり
・のあとに何らかの文字が0文字以上あり(「.*」)
・最後に改行コード(「\\n」)がある</font>

<font color=darkgray>«注意»
この書き方で半角スペースや全角スペースを入れてはいけない
(例えばhtmlなどのコードの感覚のまま)コードの視認性〜、とか何気なく入れたらNG</font>

インラインコードとコードブロックで書くとそれぞれ以下。
`/(^\s*\/\/.*\n|^\s*#.*\n)/g`
`/(\/\/.*\n|#.*\n)/g`

```
/(^\s*\/\/.*\n|^\s*#.*\n)/g
/(\/\/.*\n|#.*\n)/g
```
### ■具体例２：文字種いろいろ
・全角ひらがな　⇒　<font color=seagreen>/<font color=#eb6101>[\u3040-\u309F]</font>/g</font>
・CJK統合漢字　⇒　<font color=seagreen>/<font color=#eb6101>[\u3400-\u9FFF]</font>/g</font>
・CJK互換漢字　⇒　<font color=seagreen>/<font color=#eb6101>[\uF900-\uFAFF]</font>/g</font>
・カタカナ　⇒　<font color=seagreen>/<font color=#eb6101>[\u30A1-\u30FA]</font>/g</font>
・大文字小文字英　⇒　<font color=seagreen>/<font color=#eb6101>[a-zA-Z]</font>/g</font>
・大文字小文字英+アンダーバーとハイフンも　⇒　<font color=seagreen>/<font color=#eb6101>[a-zA-Z_-]</font>/g</font>
<font color=darkgray>※「-(ハイフン)」を含ませたいときは最後に書く、じゃないと『[a-z]』の『aからz』の『から』のようなことになってうまく働かなくなる</font>

## 正規表現で使うパターン
### <font color=#eb6101>■通常の文字として使う</font>
**・「<font color=#B168A8>\\</font>」正規表現の文字の特別な意味を除去**
例)
 「<font color=#B168A8>\\</font><font color=#eb6101>.</font>」で、なんらかの1文字の「.」としてではなく(後述)、単なる文字としての「.」ドット

### <font color=#eb6101>■特別な意味を表す文字パターン</font>
**・「<font color=#eb6101>.</font>」何らかの1文字**
**・「<font color=#eb6101>\w</font>」大文字小文字英、数字、「_(アンダースコア)」**
　　**「<font color=#eb6101>[a-zA-Z_0-9]</font>」**と同じ
**・「<font color=#eb6101>\d</font>」0〜9の数字** <font color=darkgray>※10進数 ※numberのnじゃないんかーい...</font> **「<font color=#eb6101>[0-9]</font>」**
**・「<font color=#eb6101>\t</font>」タブ文字**
**・「<font color=#eb6101>\s</font>」空白文字</font>** <font color=darkgray>※文字コードがUTF-8の場合は全角スペースもマッチ、UTF-8じゃなかったら全角スペースはマッチしない</font>
　　<font color=darkgray>タブ、改行、改ページ、全角スペース、半角スペース</font>**「<font color=#eb6101>[\t\n\x0B\f\r]</font>」**
**・「<font color=#eb6101>\S</font>」非空白文字** <font color=darkgray>※なんのこっちゃ</font>

### <font color=#eb6101>■繰り返しを表すパターン</font>
**・「<font color=#eb6101>\*</font>」0文字以上の繰り返し** 
　　**「<font color=#eb6101>.\*</font>」**何らかの1文字の0回以上繰返し
　　**「<font color=seagreen>/<font color=#eb6101>\d*</font>/</font>」**0〜9の数字の0文字以上繰返し
**・「<font color=#eb6101>+</font>」1文字以上の繰り返し** <font color=darkgray>※1文字以上存在しないと検出できない</font>
　　**「<font color=seagreen>/<font color=#eb6101>\d+</font>/</font>」**0〜9の数字の1文字以上繰返し
**・「<font color=#eb6101>?</font>」1回または0回**
**・「<font color=#eb6101>{}</font>」繰り返す回数を指定**
　　**「<font color=#eb6101>{,n}</font>」** n回以下、**「<font color=#eb6101>{n,m}</font>」** n回以上m回未満

### <font color=#eb6101>■文字の位置を表すパターン </font>
**・「<font color=#eb6101>^</font>」 行の先頭**
**・「<font color=#eb6101>$</font>」 行の末尾**
**・「<font color=#eb6101>\b</font>」 単語境界** <font color=darkgray>※なんのこっちゃよくわからん</font>
**・「<font color=#eb6101>\B</font>」 単語境界以外** <font color=darkgray>※なんのこっちゃよくわからん</font>

### <font color=#eb6101>■任意の文字列を表すパターン</font>
**・「<font color=#eb6101>[ ]</font>」一連の文字セットを表す** ※1文字に限る
**・「<font color=#eb6101>( )</font>」文字パターンをグループ化する** ※2文字以上のパターン
**・「<font color=#2E64FE>|</font>」文字列を分ける** ※2文字以上のパターンを複数列挙

### <font color=#eb6101>■先読み、先読み否定</font>
**・「txt1<font color=#eb6101>(?<<font color=#2E64FE>=</font></font>txt2<font color=#eb6101>)</font>」 <font color=#2E64FE>肯定</font>先読み：txt1に続いてtxt2が現れる場合のみ, txt1にマッチ**
**・「txt1<font color=#eb6101>(?<<font color=#2E64FE>!</font></font>txt2<font color=#eb6101>)</font>」 <font color=#2E64FE>否定</font>先読み：txt1に続いてtxt2が現れない場合のみ, txt1にマッチ**

### <font color=#eb6101>■後読み、後読み否定</font>
**・「<font color=#eb6101>(?<font color=#2E64FE>=</font></font>txt2<font color=#eb6101>)</font>txt1」　<font color=#2E64FE>肯定</font>後読み：txt1の直前にtxt2がある場合のみ、txt1にマッチ**
**・「<font color=#eb6101>(?<font color=#2E64FE>!</font></font>txt2<font color=#eb6101>)</font>txt1」　<font color=#2E64FE>否定</font>後読み：txt1の直前にtxt2が現れない場合のみ、txt1にマッチ**