Change color of table text due to search operatives

Question

I have tables which are updating via dynamic ways. I want to change specific texts to colorful ones, during search operation in real time.

In this example, as you can see, it's possible to make them colorful for all document via smart way.

And this second example shows perfectly that how you can create a real time search engine for table.

Now, here is the question: Is it possible to make that real time search's results colorfull? Not the whole column or row. I just need to change color value of input 's matched value. Long story short, how can I modify the 2nd example for this?

Here is the code: http://jsfiddle.net/e2106b62/2/

Classic tables I've used in HTML:

 <table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table> 

<input id="search">

JS I'm trying to use for search (You can find this on 2nd example link):

var $rows = $('#table tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();

        return !~text.indexOf(val);
    }).hide();
});

And another JS which I need to implement in search module:

$(this).css('color', 'red');

Answer 1

Building off your examples, this does the trick.

Working fiddle

var $cells = $('#table td');
$('#search').keyup(function() {
    var input = $(this).val();
    var val = '^(?=.*\\b' + $.trim(input).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
        reg = RegExp(val, 'i'),
        text;
    
    $cells.show().filter(function() {
        text = $(this).text().replace(/\s+/g, ' ');
        if(!reg.test(text) || input == ''){
         $(this).css('color','black');
        } else {
            $(this).css('color','green');
        }
    });
});

body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" placeholder="Type to search">
<table id="table">
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

Answer 2

Just wanted to add a different highlight option. This way it will highlight only the matched text, case insensitive. You can change the css class to higlight it the way you want, like changing background-color too.

Working JSFiddle

$('#search').keyup(function() {
    $(".highlight").removeClass("highlight");
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $('table tr').hide().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return ~text.indexOf(val);
    }).show().find("td").each(function(){

        var start = $(this).text().toLowerCase().indexOf(val);

        if(start !== -1){
            var end = val.length;

            var start_text = start != 0 ? $(this).text().substring(0,start) : "";
            var end_text = $(this).text().substring(start + end);
            var match = $(this).text().substring(start, start + end);

            $(this).html(start_text+'<span class="highlight">'+match+'</span>'+end_text);
        }
    });
});