Preserving case / capitalization with JavaScript replace method

Question

I'm continuing work on a search term suggestion tool using Jquery UI. I am now working on displaying the results with the search term pattern in bold. I have implemented this functionality through patching the Autocomplete's _renderItem method. The problem I have now is that the replaced characters have the same case as those typed by the user in the input (e.g. if the user typed an "A" and the returned result was "America", the replaced text would be AmericA. Here's the code:

    var exp = new RegExp(this.term, "gi") ;
    var rep = item.label.replace( exp, "<span style='font-weight:bold;color:Black;'>"
    + this.term + "</span>");

As always, thanks in advance for any help.

Answer 1

You can use:

var rep = item.label.replace(exp,
                             "<span style='font-weight:bold;color:Black;'>$&</span>");

When replacing a string, $& means "the whole match", so you don't have to repeat the search term (in some cases you don't know it). In other flavors, you may use $0 or \0.
Also, remember to escape special characters in this.term.

Answer 2

You can add your expression in a group by encapsulating them in parentheses

var exp = new RegExp("(" + this.term + ")", "gi") ;
var rep = item.label.replace( exp, "<span style='font-weight:bold'>$1</span>");

You can the refere to that group using $1.

See here for more details about backreferences.