Searching for and highlighting text within a bootstrap table has proven to be a challenge.
Check out the Fiddle for an example: https://jsfiddle.net/99x50s2s/74/
HTML
<table class='table table-bordered'>
<thead>
<tr><th>ID</th><th>Name</th></tr>
</thead>
<tbody id='UserInfoTableBody'>
<tr><td>1</td><td>UserName 1</td></tr>
<tr><td>2</td><td>UserName 2</td></tr>
<tr><td>3</td><td>UserName 1</td></tr>
<tr><td>4</td><td>UserName 3</td></tr>
<tr><td>5</td><td>UserName 2</td></tr>
<tr><td>6</td><td>UserName 2</td></tr>
<tr><td>7</td><td>UserName 1</td></tr>
<tr><td>8</td><td>UserName 1</td></tr>
<tr><td>9</td><td>username 2</td></tr>
</tbody>
</table>
JS
HighlightMatches();
function HighlightMatches(){
var textToMatch = 'UserName 2';
$('.match').replaceWith(function () {
return this.innerText;
});
$('#UserInfoTableBody td').each(function (i, tdContent) {
var $td = $(tdContent);
$td.html($td.html().
split(textToMatch).
join('<span class="match">' + textToMatch + '</span>'));
});
}
CSS
.match{background-color:yellow;}
Issue:
The current search is sensitive to case and I need it to be case-insensitive. The code above searches for 'UserName 2', but misses the value in the last row ('username 2').
I attempted to use 'contains', but I'm unsure how to properly highlight the text. Any assistance on this matter would be greatly appreciated.
Expectation
The goal is to only highlight the text that matches the search criteria. This should function properly for,
var textToMatch = '2';
var textToMatch = 'User';
var textToMatch = 'user';