Javascript:zvýraznění podřetězce se zachováním původních velkých a malých písmen, ale vyhledávání v režimu bez ohledu na velikost písmen

Snažím se napsat „vyhledávací pole pro návrhy“ a nemohu najít řešení, které by umožnilo zvýraznit podřetězec pomocí javascriptu, přičemž by se zachovala původní velikost písmen.

Například když hledám „ca ” Prohledávám na straně serveru v režimu bez rozlišení velkých a malých písmen a mám následující výsledky:

Kalkulačka

kalendář

ÚNIK

Chtěl bych zobrazit hledaný řetězec ve všech předchozích slovech, takže výsledek by měl být:

Ca lculator

ca lendar

ESCA PE

Zkusil jsem to s následujícím kódem:

var reg = new RegExp(querystr, 'gi');
var final_str = 'foo ' + result.replace(reg, '<b>'+querystr+'</b>');
$('#'+id).html(final_str);

Ale očividně tímto způsobem ztrácím původní pouzdro!

Existuje způsob, jak tento problém vyřešit?

Odpověď

Použijte funkci pro druhý argument pro .replace() který vrátí skutečný odpovídající řetězec se zřetězenými značkami.

Vyzkoušet: http://jsfiddle.net/4sGLL/

reg = new RegExp(querystr, 'gi');
       // The str parameter references the matched string
       //    --------------------------------------v
final_str = 'foo ' + result.replace(reg, function(str) {return '<b>'+str+'</b>'});
$('#' + id).html(final_str);​

Příklad JSFiddle se vstupem: https://jsfiddle.net/pawmbude/