Text search Bolden

Question

I am writing a custom control that includes inputting a text box and an unordered list of items below it. As the user enters a text box, I would like the matched text in the list to be bold (wrapped in tags <strong>).

   //I use keyup so the value takes in to account the last keystroke.
   $('#filterList').keyup(function() {
        var $this = $(this);

        //Clears the last function
        clearTimeout($this.data('timer'));

        //Runs the function after 400ms if no other keystrokes have taken place
        $this.data('timer', setTimeout(function() {
            var searchString = $this.val();

            $('li').each(function() {

                //Remove old strong tags.
                $(this).find('strong').replaceWith(function() {
                    return $(this).html();
                });

                //Here lies the issue... its close, but not quite there.
                $(this).html($(this).html().replace(new RegExp(searchString, "ig"), '<strong>'+searchString+'</strong>'));

            });

        }, 400));
    });

The problem I am facing is that I want the search to be case insensitive . I was able to match the text accordingly, but replaced it, and saving the original shell becomes a problem. Also, I don't know how I feel about creating a regular expression from user input.

Suggestions please! Thank you in advance!

Answer 1

jQuery Highlight Plugin, .

, '<strong>$&</strong>' - $&, , . , . : http://jsfiddle.net/kobi/cKVPY/