Regex / replace question, how to remove while searching for text in a query

Question

I have one problem when searching for text. I think this is a regex / replace problem.

My search function works fine, but the problem is that when searching for a capital letter "N", the whole small letter "n" changes to capital letters.

Here is what I use ... Try to find "N" and you will see all the small "n" changes in the capital of "N".

http://jsfiddle.net/ravi1989/4BAau/3/

function searchAndHighlight(searchTerm, selector) { if (searchTerm) { //var wholeWordOnly = new RegExp("\\g"+searchTerm+"\\g","ig"); //matches whole word only //var anyCharacter = new RegExp("\\g["+searchTerm+"]\\g","ig"); //matches any word with any of search chars characters var selector = selector || "#realTimeContents"; //use body as selector if none provided var searchTermRegEx = new RegExp(searchTerm, "ig"); var matches = $(selector).text().match(searchTermRegEx); if (matches != null && matches.length > 0) { $('.highlighted').removeClass('highlighted'); //Remove old search highlights //Remove the previous matches $span = $('#realTimeContents span'); $span.replaceWith($span.html()); var content = "<span class='match'>" + searchTerm + "</span>"; var replaced = $(selector).text().replace(searchTermRegEx, content); $(selector).html(replaced);; $('.match:first').addClass('highlighted'); var i = 0; $('.next_h').off('click').on('click', function () { i++; if (i >= $('.match').length) i = 0; $('.match').removeClass('highlighted'); $('.match').eq(i).addClass('highlighted'); $('.ui-mobile-viewport').animate({ scrollTop: $('.match').eq(i).offset().top }, 300); }); $('.previous_h').off('click').on('click', function () { i--; if (i < 0) i = $('.match').length - 1; $('.match').removeClass('highlighted'); $('.match').eq(i).addClass('highlighted'); $('.ui-mobile-viewport').animate({ scrollTop: $('.match').eq(i).offset().top }, 300); }); if ($('.highlighted:first').length) { //if match found, scroll to where the first one appears $(window).scrollTop($('.highlighted:first').position().top); } return true; } } return false; } $(document).on('click', '.searchButtonClickText_h', function (event) { $(".highlighted").removeClass("highlighted").removeClass("match"); if (!searchAndHighlight($('.textSearchvalue_h').val())) { alert("No results found"); } }); 

Answer 1

The main problem is that you are creating a variable that wraps the search query passed in the gap, rather than matching matches. Therefore, when you replace all regular expressions (case insensitive, because "ig") with this wrapped search term, it replaces all instances of this term, regardless of the case with the exact text passed. It is worth noting that this happens with every letter, not just N. Any letter you seek in the form of capital replaces its lowercase copies in the document.

To fix this, instead of replacing 1: 1 ( a.replace('thing','otherthing' ), try passing the function as the second parameter. When you do this, each individual match in the string is passed to that function and replaced with the return value of the function.

For instance:

 var a = 'abbacca'; var r = new RegExp('A','ig'); a.replace(r, function(m){ return '_' + m + '_'; }); // returns '_a_bb_a_cc_a_' 

So instead:

 var content = "<span class='match'>" + searchTerm + "</span>"; var replaced = $(selector).text().replace(searchTermRegEx, content); 

try the following:

 var replaced = $(selector).text().replace(searchTermRegEx, function(m){ return '<span class="match">' + m + '</span>'; }); 

Here is the fiddle with this change