JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<table id="R" class="display">
<thead>
<tr>
<th>Date</th>
<th>Rating</th>
<th>Timestamp</th>
</tr>
</thead>
<tr>
<td>30.03.2014</td>
<td>15.678 million viewers, #1; 10.157 million adults 18-49 (8.00 rating), #1</td>
<td>1396137600</td>
</tr>
<tr>
<td>23.03.2014</td>
<td>13.467 million viewers, #1; 8.458 million adults 18-49 (6.66 rating), #1</td>
<td>1395532800</td>
</tr>
<tr>
<td>16.03.2014</td>
<td>12.865 million viewers, #1; 8.075 million adults 18-49 (6.36 rating), #1</td>
<td>1394928000</td>
</tr>
<tr>
<td>09.03.2014</td>
<td>12.652 million viewers, #2; 8.004 million adults 18-49 (6.30 rating), #1</td>
<td>1394323200</td>
</tr>
<tr>
<td>02.03.2014</td>
<td>12.607 million viewers, #5; 8.137 million adults 18-49 (6.41 rating), #3</td>
<td>1393718400</td>
</tr>
<tr>
<td>24.02.2014</td>
<td>13.122 million viewers, #2; 8.428 million adults 18-49 (6.64 rating), #1</td>
<td>1393200000</td>
</tr>
<tr>
<td>16.02.2014</td>
<td>13.339 million viewers, #2; 8.670 million adults 18-49 (6.83 rating), #1</td>
<td>1392508800</td>
</tr>
<tr>
<td>09.02.2014</td>
<td>15.760 million viewers, #2; 10.367 million adults 18-49 (8.17 rating), #1</td>
<td>1391904000</td>
</tr>
<tr>
<td>01.12.2013</td>
<td>12.051 million viewers, #5; 7.732 million adults 18-49 (6.09 rating), #4</td>
<td>1385856000</td>
</tr>
<tr>
<td>24.11.2013</td>
<td>11.293 million viewers, #9; 7.179 million adults 18-49 (5.65...
CSS
.filterMatches{
background-color: #BFFF00;
}
JavaScript
// HIGHLIGHT FCT
jQuery.fn.dataTableExt.oApi.fnSearchHighlighting = function (oSettings) {
// Initialize regex cache
oSettings.oPreviousSearch.oSearchCaches = {};
oSettings.oApi._fnCallbackReg(oSettings, 'aoRowCallback', function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
// Initialize search string array
var searchStrings = [];
var oApi = this.oApi;
var cache = oSettings.oPreviousSearch.oSearchCaches;
// Global search string
// If there is a global search string, add it to the search string array
if (oSettings.oPreviousSearch.sSearch) {
searchStrings.push(oSettings.oPreviousSearch.sSearch);
}
// Individual column search option object
// If there are individual column search strings, add them to the search string array
if ((oSettings.aoPreSearchCols) && (oSettings.aoPreSearchCols.length > 0)) {
for (var i in oSettings.aoPreSearchCols) {
if (oSettings.aoPreSearchCols[i].sSearch) {
searchStrings.push(oSettings.aoPreSearchCols[i].sSearch);
}
}
}
// Create the regex built from one or more search string and cache as necessary
if (searchStrings.length > 0) {
var sSregex = searchStrings.join("|");
if (!cache[sSregex]) {
var regRules = "(",
regRulesSplit = sSregex.split(' ');
regRules += "(" + sSregex + ")";
for (var i = 0; i < regRulesSplit.length; i++) {
regRules += "|(" + regRulesSplit[i] + ")";
}
regRules += ")";
// This regex will avoid in HTML matches
cache[sSregex] = new RegExp(regRules + "(?!([^<]+)?>)", 'ig');
}
var regex = cache[sSregex];
}
// Loop through the rows/fields for matches
jQuery('td', nRow).each(function (i)...