Question

I have an input field that has autocomplete on it (custom made autocomplete).

When the user types a word, the matching phrase should appear but the word the user typed should have a different color.

So if for example I have the string like “Hello World” and the user types “ll”, He should get a list of matching phrases that contain “ll” but the “ll” should have different color.

So i need a way to splice “Hello World” so i’ll get : ["he","ll","o World"] and then i can wrap “ll” with <span> and style it.

Answer 1

You can use replace

strhtml.replace (/yourstrToSearch/g, '<span class="cl">' + 'yourstrToSearch' + '</span >');

Edit:

yourstrToSearch = "ll";
var regex = new RegExp( yourstrToSearch, "gi");
$('#div1').html($('#div1').html().replace(regex, '<span class="cl">' + yourstrToSearch + '</span >'));

Live Demo