検索した文字列の色を変えたい

ページ内で特定の文字列を検索して、テーブル内のレコード抽出しています。
（抽出はできています）
この後、抽出されたレコード内の特定の文字列（検索した文字列）の色を変える、という仕組みを作りたいのですが、うまくいきません。

CSSのハイライトをどのように記述すればいいのでしょうか。

以下のような仕組みです。

１．検索ボックスに文字を入力する
２．検索ボタンを押す
３．該当のレコードのみ表示する and 検索した文字列の色を変える

１．すべて表示ボタンをクリックする
２．文字列の色を元に戻す

jQuery
1$(function() {
2	$('#button1').on("click", function() {
3		var re = new RegExp($('#search').val().trim().replace(/ +/, "|"));
4		$('#result tbody tr').each(function() {
5			$(this).toggle($(this).find('td').filter(function() {
6				return $(this).text().match(re) ? true : false;
7			}).length > 0);
8		});
9	});
10	$('#button2').on("click", function() {
11		$('#result tbody tr').each(function() {
12			var tr = $(this);
13			var re = $('#search').val().trim().split(/ +/);
14			var flg = re.map(function(x) {
15				return tr.has($('td').filter(function() {
16					return $(this).text().match(new RegExp(x));
17				})).get();
18			}).filter(function(x) {
19				return x.length > 0;
20			}).length == re.length;
21			tr.toggle(flg);
22		});
23	});
24	$('#button3').on("click", function() {
25		$('#result tr').show();
26	});
27});
28

CSS
1.highlight {
2	background-color: yellow
3}

html
1<head>
2<script type="text/javascript" src="jquery.js"></script>
3<script type="text/javascript" src="jquery-highlight-5s.js"></script>
4</head>
5<body>
6
7<p> <input type="text" id="search" value=" "> <input type="button" value="and検索" id="button2" id="btn-onoff"> <input type="button" value="すべて表示" id="button3"> </p>
8<table id="result">
9
10
11
12</body>

m.ts10806

2019/01/18 00:17

「うまくいかない」だけでは質問者さんがどこまでできているか、このコードはどこまで実現できていて何ができていないのか分からないので具体的に記載してください。

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

回答1件

ベストアンサー

tdの中にタグがないことを前提にしてよければこう

javascript
1<script>
2$(function(){
3  $('#button1').on("click",function(){ 
4    var re = new RegExp($('#search').val().trim().replace(/ +/g,"|")); 
5    $('#result tbody tr').each(function(){
6      $(this).toggle($(this).find('td').filter(function(){
7        return $(this).text().match(re)?true:false;
8      }).length>0);
9    });
10  });
11  $('#button2').on("click",function(){ 
12    $('#result tbody tr').each(function(){
13      var tr=$(this);
14      var re=$('#search').val().trim().split(/ +/);
15      var flg=re.map(function(x){
16        return tr.has($('td').filter(function(){
17          return $(this).text().match(new RegExp(x));
18        })).get(); 
19      }).filter(function(x){
20        return x.length>0;
21      }).length==re.length; 
22      tr.toggle(flg);
23    });
24  });
25  $('#button3').on("click",function(){ 
26    $('#result tr').show(); 
27  }); 
28  $('#check1').on("change",function(){ 
29    $('#result td').each(function(){
30      $(this).text($(this).text());
31    });
32    if($(this).prop('checked')){
33      $('#result td').each(function(){
34        var re = new RegExp("("+$('#search').val().trim().replace(/ +/g,"|")+")+",'g'); 
35        $(this).html($(this).html().replace(re,'<span style="display:inline-block;background-color:yellow">$&</span>'));
36      });
37    }
38  }); 
39  $('#search').on('keyup',function(){
40    $('#check1').trigger('change');
41  });
42});
43</script>
44<input type="text" id="search" value="  a    b  ">
45<input type="button" value="or検索" id="button1">
46<input type="button" value="and検索" id="button2">
47<input type="button" value="すべて表示" id="button3">
48<label><input type="checkbox" id="check1">ハイライト</label>
49
50<table id="result">
51<tbody>
52<tr>
53<td>1</td>
54<td>aaa</td>
55<td>bbb</td>
56</tr>
57<tr>
58<td>2</td>
59<td>aaa</td>
60<td>---</td>
61</tr>
62<tr>
63<td>3</td>
64<td>bbb</td>
65<td>---</td>
66</tr>
67<tr>
68<td>4</td>
69<td>---</td>
70<td>abcba</td>
71</tr>
72<tr>
73<td>5</td>
74<td>---</td>
75<td>---</td>
76</tr>
77</tbody>
78</table>