Finding and highlighting text using CSS or jQuery

Question

I have a div containing some text:

 <div>Some text here</div> 

I also have a text box in which the user enters a search string.

Is there a CSS way to set the background-color property for a text string matching a specific keyword entered in the search box?

What I have done now is to find and replace using JavaScript. I am ready to use jQuery for this.

Answer 1

Found this jQuery plugin called SearchHighlight

Here is the code

CSS

 <style type='text/css'> span.hilite {background:yellow} </style> 

Javascript

 <script src='SearchHighlight.js'></script> <script type='text/javascript'> $(function(){ $('#textBoxId').keyup(function () { var val = $(this).val(); var options = { exact:"partial", style_name_suffix:false, keys:val } $(document).SearchHighlight(options); } }); </script> 

Answer 2

enter code here Sounds like you need jQuery highlighter plug in

http://mir3z.imtqy.com/jquery.texthighlighter/

jQuery Text Highlighter is a jQuery plugin for highlighting text fragments in HTML documents.

Note: If you need help with jQuery, see http://jquery.com/

Answer 3

CSS is not capable of this. Use the JS solution, as you already do.

My research is based on data from this question CSS 3 content selector?

Answer 4

Using jQuery UI you can try this

JavaScript code

 $("body").highlight(searchTerm); 

CSS

 .highlight{background-color:yellow}