JS テーブルのデータ検索

質問

JavaScriptのテーブルで データ検索をします。
ヒットしたセルの背景は色付けします。

正規表現を用いて検索するには どのようなコードになりますか？

※ 正規表現を用いれば セルごとの照合作業は不要です。
　 つまり、ループ処理は無用です。

[HTML]
<form name="form3">
<input name="btn" type="button" value="整数">
<input name="btn" type="button" value="小数">
<input name="btn" type="button" value="半角英字">
<input name="btn" type="button" value="日本語">
<input name="reset" type="button" value="リセット">
</form>

<table id="table3" border="1">
<thead>
<tr>
<th></th>
<th>A</th><th>B</th><th>C</th><th>D</th><th>E</th>
<th>F</th><th>G</th><th>H</th><th>I</th><th>J</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>風</td><td>25</td><td>fig</td><td>36</td><td>84</td>
<td>45</td><td>dog</td><td>鳥</td><td>7.9</td><td>昼</td>
</tr>
<tr>
<th>2</th>
<td>16</td><td>ink</td><td>4.3</td><td>1.4</td><td>64</td>
<td>6.2</td><td>gal</td><td>7.2</td><td>6.5</td><td>hit</td>
</tr>
<tr>
<th>3</th>
<td>arm</td><td>83</td><td>1.8</td><td>6.1</td><td>冬</td>
<td>6.4</td><td>8.4</td><td>地</td><td>joy</td><td>cat</td>
</tr>
<tr>
<th>4</th>
<td>22</td><td>egg</td><td>春</td><td>番</td><td>3.5</td>
<td>天</td><td>人</td><td>7.8</td><td>朝</td><td>2.8</td>
</tr>
<tr>
<th>5</th>
<td>月</td><td>愛</td><td>5.1</td><td>花</td><td>bat</td>
<td>51</td><td>7.5</td><td>夏</td><td>18</td><td>秋</td>
</tr>
</tbody>
</table>

回答No.1

Keis_425

これでどうでしょうか

// ボタン要素の取得
var buttons = document.getElementsByName('btn');

// テーブル要素の取得
var table = document.getElementById('table3');

// ボタンにクリックイベントを追加
buttons.forEach(function(button) {
button.addEventListener('click', function() {
// 入力値を正規表現パターンとして取得
var pattern = new RegExp(button.value, 'i');

// テーブルの行ごとに処理
var rows = table.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].getElementsByTagName('td');

// セルごとに処理
for (var j = 0; j < cells.length; j++) {
var cell = cells[j];
var content = cell.innerHTML;

// 正規表現パターンと一致するかチェック
if (pattern.test(content)) {
// 一致したセルの背景色を変更
cell.style.backgroundColor = 'yellow';
} else {
// 一致しないセルの背景色を初期化
cell.style.backgroundColor = '';
}
}
}
});
});

// リセットボタンにクリックイベントを追加
var resetButton = document.getElementsByName('reset')[0];
resetButton.addEventListener('click', function() {
// テーブルのすべてのセルの背景色を初期化
var cells = table.getElementsByTagName('td');
for (var i = 0; i < cells.length; i++) {
cells[i].style.backgroundColor = '';
}
});

お礼

ご回答ありがとうございます。

補足

丁寧なコードでいいですね。
しかし、肝心な動作に不具合があります。

このコードで、なぜ目的通りにならないのか？

それは、ボタンの値を正規表現にしているのが原因です。
例えば、「整数」ボタン押下時なら、
このコードでの正規表現は「 /整数/i」。
これで該当するTDセルは無いですね。
だからヒットしないのです。

forループで
正規表現を用いてデータ検索するのは、
オーソドックスな方法だと思われますが、
課題にあるとおり、
正規表現を上手に用いたらループ処理は不要です。