Question

Can someone help me on how to highlight the matching strings/substrings from a keyword search?

For example if the user inputs “BEARING”, the datagrid should display the following

ADAPTER BEARING

BAR AIR*BEARING* TURN

BEARING BALL

BEARING BRONZE

I am almost finish but in this example, the whole AIRBEARING is highlighted which supposed to be, it is only the BEARING that should be highlighted only.

Answer 1

Create a css class and call it ‘highlight’:

.highlight { background-color: yellow; }

Then use a regex replace to wrap that text with the class:

function highlight(walloftext, valuetohighlight) {
    var x = new RegExp("(" + valuetohighlight + ")", "gi");
    return walloftext.replace(x, '<span class="highlight">$1</span>');
}

http://jsfiddle.net/rkw79/5cCuc/