正規表現の内容が分かりません。

$1には<td>、$3は</td>が配置され、$(this).children('td').data('link')が、
http//jquery.com/とhttp://jqueryui.comになるということは理解出来ています。
$2には正規表現([^<]+)に該当するjQueryとjQuery UIの文字列が入るのですが、
パターンの意味自体がよく分かりません。
これは<を含まない文字列をキャプチャするという意味合いでしょうか。
このパターンを用いる理由もよく分からないです。
よろしくお願い致します。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title></title>
6</head>
7<body>
8  <table>
9    <tr></tr>
10    <tr></tr>
11  </table>
12<script src="js/jquery-3.6.0.min.js"></script>
13<script src="js/app.js"></script>
14</body>
15</html>

JavaScript
1// 改訂新版jQuery本格入門 P126 リスト３－１３より
2
3// それぞれの<tr>に<td>jQuery</td>と<td>jQuery UI</td>を追加
4$('<td>', { text : 'jQuery', data : { link : 'http//jquery.com/' }})
5  .appendTo('tr:first');
6$('<td>', { text : 'jQuery UI', data : { link : 'http://jqueryui.com' }})
7  .appendTo('tr:last');
8
9// それぞれの<tr>の最後の子要素に<td>を追加
10$('table tr').append(function(index, html) {
11  return html.replace(/(<td>)([^<]+)(<\/td>)/,
12      "$1<a href=\"" + $(this).children('td').data('link') + "\">$2</a>$3");
13});
14
15// それぞれの<tr>の最初の子要素に<td>を追加
16$('table tr').prepend(function(index, html) {
17  return '<td>' + (index + 1) + '</td>';
18});

行動規範の内容に同意します

回答2件

ベストアンサー

jQueryのdataメソッドは独自の処理なのでわかりづらいですね
jsではカスタムデータとしてdata-*で実装されるようになり
今やjQueryのdataは害悪なので使用を控えたほうがよいでしょう
（内部的なデータとして保持するので属性に反映せず使いにくい）

さて本題

/(<td>)([^<]+)(<\/td>)/

は「<td>」から始まり、「</td>」で終わる「<」以外の文字列という意味になります

<td>jQuery</td>に当てはめると

「<td>」が$1
「</td>」が$3
その間の「jQuery」が$2としてキャプチャされます。

このHTMLを正規表現でつかもうとする処理も効率的なやり方ではないですね
また正規表現としても中途半端で今となってはあまりおすすめできないサンプルだと思います。

素のjsに書き下すとこんなかんじ

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('tr:first-child').appendChild(Object.assign(document.createElement('td'),{textContent:'jQuery',data:{link:'http//jquery.com/'}}));
4  document.querySelector('tr:last-child').appendChild(Object.assign(document.createElement('td'),{textContent:'jQuery UI',data:{link:'http://jqueryui.com'}}));
5  document.querySelectorAll('tr').forEach((ele,index)=>{
6    ele.insertAdjacentHTML('beforeend',ele.innerHTML.replace(/(<td>)([^<]+)(<\/td>)/,`$1<a href="${ele.querySelector('td').data.link}">$2</a>$3`));
7    ele.insertAdjacentHTML('afterbegin',`<td>${index+1}</td>`);
8  });
9});
10</script>
11<table>
12<tr></tr>
13<tr></tr>
14</table>

最近のjsの正規表現ならこんな感じでいけます

javascript
1const html="<td>jQuery</td>";
2const reg=/(?<=<td(| .?)>).+?(?=<\/td>)/g;
3const result=html.replace(reg,`<a href="test">$&</a>`);
4console.log(result);