正規表現 (?:pattern) グループ化のみカッコについてです。

「jQuery(?:\sUI)?」の部分がよく分かりません。
私が理解できている範囲は以下の通りです。

１．(?:pattern) : グループ化だけが必要な部分に適用して、なおかつキャプチャはされない。
２．(pattern)? : パターン化されたグループは一つあるかあるいは何もなくてもよい。

ですが、「jQuery UI」もキャプチャされて「$1」に当てはめられています。
矛盾しているように思えるので解説して頂けないでしょうか。
よろしくお願い致します。
改訂新版jQuery本格入門 P199のコードより。

jQuery
1$(function() {
2  $('div p').each(function() {
3    const html = $(this)
4                   .html()
5                   .replace(
6                     /(jQuery(?:\sUI)?)/g,
7                     "<span class=\"highlight\">$1</span>"
8                   );
9    $(this).html(html);
10  });
11});

HTML
1  <div>
2    <p>さまざまなWebサイトで<strong>jQueryが活躍</strong>しています</p>
3    <p>jQuery UIはjQueryに<strong>ウィジェット</strong>などを拡張するプラグインです</strong></p>
4  </div>

CSS
1span.highlight {
2  background-color : #ffa;
3  color            : red;
4  text-decoration  : underline;
5}

Zuishin

2022/09/29 11:17

なぜ矛盾していると感じたのかわかりません。?: を外せば $2 があるところ、無いことを確かめてみましょう。

taka_oct092018

2022/09/29 14:01

Zuishin様、ご指摘ありがとうございます。「?:」を外してみましが「$1」は一つしかないので結果はかわらず、どのような意図で設定されているのかが分かりませんでした。他の専門書を読み進めていくうちに以下の二点の効果があることが分かりました。１．正規表現のエンジンの負担を減らせる。２．不要な前方参照の番号を少なく出来る。