How to highlight all matching strings

Question

A page contains a search input field and a table.

How to highlight, in the table, all substrings that match the text in the input field?

I have tried this, but it changes the background of the td element.

$(".projects-list > tbody > tr > td:contains('"+$(this).val()+"')").css("background", "#6a5acd");

How to highlight only the part of text that match?

You should wrap the matching texts with an element. You can't set style to the textNodes. — Ram, Jan 28 '14 at 09:04
possible duplicate of [Highlight a word with jQuery](http://stackoverflow.com/questions/119441/highlight-a-word-with-jquery) — helle, Jan 28 '14 at 09:07
the matching text is currently not wrap with an element but of course we need to dynamically add an element. What's the best way to do it ? — Nanego, Jan 28 '14 at 09:11

tewathia · Accepted Answer · 2014-01-30T05:55:50.937

3

You can use split(matchingText).join(wrappedMatchingText) on each of the target cells.

$('.projects-list td').each(function (i, e) {
    var $e = $(e);
    $e.html($e.html().split(text).join('<span class="matching">' + text + '</span>'));
});

This would wrap all instances of the target string(stored in the variable text) inside individual span.matching tags

~~DEMO~~ DEMO

edited Jan 30 '14 at 05:55

answered Jan 28 '14 at 09:12

tewathia

6,890
3
22
27

Just investigate the DOM to see the sea of nested `.matching` elements. – Ram Jan 28 '14 at 09:14
@BlackSheep On clicking the 'highlight' button multiple times, you mean? Fixed, I think. See the updated fiddle in my answer. – tewathia Jan 28 '14 at 09:27
1

Yes, the updated fiddle doesn't create nested elements, just a note, Firefox doesn't support the non-standard `innerText` property. It supports `textContent`. – Ram Jan 28 '14 at 09:41

score 0 · Answer 2 · answered Jan 28 '14 at 09:13

0

Here is html,

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>row 2</td>
<td>row 2</td>
</tr>
</table>

Here is Jquery,

$(document).ready(function(){

$("td:contains('cell 1')").css("color","#6a5acd");//color highlighting 

})

And reference link,

http://jsfiddle.net/dhana36/fe485/

answered Jan 28 '14 at 09:13

dhana

6,487
4
40
63

1

I think what OP means that if you type `cell` it should highlight `cell` only and not complete content of the `td`. – TheVillageIdiot Jan 28 '14 at 09:16

score 0 · Answer 3 · answered Jan 28 '14 at 09:19

Try

if (!RegExp.escape) {
    RegExp.escape = function (s) {
        return s.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
    };
}

then

$(".projects-list > tbody > tr > td .highlighted").contents().unwrap();
var search = RegExp.escape(this.value);
$(".projects-list > tbody > tr > td").html(function (i, text) {
    return text.replace(new RegExp('(' + search + ')', 'gi'), '<span class="highlighted">$1</span>')
})

Demo: Fiddle

Note: If the cells has html contents that is not handled here

Why does this break down if I press backspace, when there is just one character in the `input` tag, and try to type something? — tewathia, Jan 28 '14 at 09:33

How to highlight all matching strings

3 Answers3