How to highlight dynamic words from response for different input string javascript, jquery, regex

Question

[blog]: https://jsfiddle.net/kb413ae8/ "click here" for working fiddle

Kids Markers & Crayons is a response string for which highlighting of text should append, based on input we pass in searchQuery variable in code.

if Markers is provided as searchQuery input, Markers should be highlighted, which is currently working fine in above fiddle link.

if space is provided after word markers and pass has a searchQuery input in code, Kids 'b tag with class='boldTxt'>Markers & Crayons is appended. which is weird. Happens same for all word with space.

Highlight of text/word should happen if first character in searchQuery input matches with first character of word in response. does not matter where the word is. Thanks

 var data = {"ResultSet":{"result":[ {"rank":"999999","term":"Kids Markers & Crayons"}, {"rank":"999999","term":"Crayola Fine Line Markers"}, {"rank":"999999","term":"Crayola Super Tips Washable Markers"}, {"rank":"999999","term":"Crayola Washable Markers Broad Line Classic"}, {"rank":"999999","term":"Post-it Assorted Page Markers"}, {"rank":"999999","term":"Crayola Markers Broad Line Classic"}, {"rank":"999999","term":"Crayola Crayons"}, {"rank":"999999","term":"Crayola Washable Markers Classic Colors"}, {"rank":"999999","term":"Crayola Washable Crayons Large"}] ,"totalResultsAvailable":"32","totalResultsReturned":11}}; for(i=0; i<9; i++) { var result = data.ResultSet.result[i].term; //console.log('result: ' + result); var searchQuery = 'Markers '; /*searchQuery inputs searchQuery = 'c'; o/p: c should be highlighted at beginning of word, In classic 'c' is highlighting twice which should not be highlighted at end or in mid of word. searchQuery = 'markers '; o/p: <b> tag is added which has to be removed. searchQuery = 'markers & c '; o/p: <b> tag is added which has to be removed. searchQuery = 'ola'; o/p: ola should be highlighted at beginning of word, In Crayola 'ola' is highlighting, which should not be highlighted at end or in mid of word. */ var searchResult = result; words = searchQuery.split(' '); $.each(words, function() { var word = this.trim(); var regex = new RegExp('(' + word + ')(?!>|b>)', 'gi'); searchResult = searchResult.replace(regex, "<b class='boldTxt'>$1</b>"); }); console.log(searchResult); $('#wag-typeaheadlists').append('<li><a>' + searchResult + '</a></li>') } 

 .boldTxt { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <ul id="wag-typeaheadlists"> </ul> 

Answer 1

In your fiddle try adding the following line after you split the searchQuery.

words = words.filter(function(word){ return word != "" });

Hope it solves your problem!