正規表現(^|\s)(\s|$)理解

Question

以下の正規表現がどのように作用しているのかわかりません。
いままでコピペで使っていましたが、なぜこのようになるのかわからないので、どなたか解説いただけませんか。

    
     (^|\s)                //空白文字または入力文字列の先頭と一致。
     (\s|$)	           //空白文字または入力文字列の末尾と一致。
     /(^|\s)active(\s|$)/　//空白 active 空白　に一致する文字列

^ 行頭マッチ
| or
$ 行末マッチ

読み下し↓

'行頭が'a 'or 空白 　且つ、　行末が'e' or 空白'　にマッチする文字列

であれば、' ' 半角スペースしか入っていない空の文字列も拾ってしまう？はず・・・

Comments

[nanami12]

こちらで、動作確認してみては？
https://weblabo.oscasierra.net/tools/regex/

Answer 1

'行頭が'a 'or 空白 　且つ、　行末が'e' or 空白'　にマッチする文字列

どうしてそう解釈されたのでしょうか。activeという文字列はactiveとしか一致しません。

「行頭もしくはスペース」→「active」→「スペースもしくは行末」となります。

Comments

[KoTT]

ああ！だから、class付与に使う時に
以下の4パターンを拾えるということですね、、
class="active"
class=" active"
class="active "
class=" active "

全くわかっていませんでした
ありがとうございます