JQuery Search Next and Previous Text Occurrence changes format when clicking

Question

I have implemented a search function with next and previous features When a user clicks on search , the first occurrence will be highlighted, then when the next button is clicked, the next occurrence is highlighted and the previous one's highlight is removed. This is also done when pressing the previous button. The issue I am having, is that when I click on any of the 3 buttons, the format of the page is changed. How can I change this so that when I search or click on next/ previous, the buttons work, but the format of the web-page doesn't change?

The following is my code:

  var searchIndex = -1; var searchTermOld =''; $(document).ready(function(){ $('.searchbox').on('change',function(){ if($(this).val()===''){ var selector= "#pageContent"; $(selector+' span.match').each(function(){ $(this).replaceWith($(this).html()); }); } searchIndex = -1; $('.searchNext').attr("disabled", "disabled"); $('.searchPrev').attr("disabled", "disabled"); searchTermOld = $(this).val(); }); $('.searchbox').on('keyup',function(){ var selector= "#pageContent"; if($(this).val()===''){ $(selector+' span.match').each(function(){ $(this).replaceWith($(this).html()); }); } if($(this).val() !== searchTermOld){ $(selector+' span.match').each(function(){ $(this).replaceWith($(this).html()); }); searchIndex = -1; $('.searchNext').attr("disabled", "disabled"); $('.searchPrev').attr("disabled", "disabled"); } }); $('.search').on('click',function(){ if(searchIndex == -1){ var searchTerm = $('.searchbox').val(); searchAndHighlight(searchTerm); } else searchNext(); if($('.match').length >1){ $('.searchNext').removeAttr("disabled"); $('.searchPrev').removeAttr("disabled"); } }); $('.searchNext').on('click',searchNext); $('.searchPrev').on('click',searchPrev); }); function searchAndHighlight(searchTerm) { if (searchTerm) { var searchTermRegEx, matches; var selector= "#pageContent"; $(selector+' span.match').each(function(){ $(this).replaceWith($(this).html()); }); try { searchTermRegEx = new RegExp('('+searchTerm+')', "ig"); } catch (e) { return false; } $('.highlighted').removeClass('highlighted'); matches = $(selector).text().match(searchTermRegEx); if (matches !==null && matches.length > 0) { var txt = $(selector).text().replace(searchTermRegEx, '<span class="match">$1</span>'); $(selector).html(txt); searchIndex++; $('.match:first').addClass('highlighted'); $(document).scrollTop($('.match').eq(searchIndex).offset().top); return true; } return false; } return false; } function searchNext(){ searchIndex++; if (searchIndex >= $('.match').length) searchIndex = 0; $('.highlighted').removeClass('highlighted'); $('.match').eq(searchIndex).addClass('highlighted'); $(document).scrollTop($('.match').eq(searchIndex).offset().top); } function searchPrev(){ searchIndex--; if (searchIndex < 0) searchIndex = $('.match').length - 1; $('.highlighted').removeClass('highlighted'); $('.match').eq(searchIndex).addClass('highlighted'); $(document).scrollTop($('.match').eq(searchIndex).offset().top); } 

 .highlighted { background-color:yellow; padding:1px 2px; margin:0 -2px; border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div class="searchBtn" style="float: right;"> <input class="searchbox" type="text"/> <button class="search">Search</button> <button class="searchNext">Next</button> <button class="searchPrev">Prev</button> </div> <div id="pageContent" style="width: 60%; height: 100%; float: right;"> <div class="sections"> <h3> Lorem </h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed neque sollicitudin, sollicitudin nibh vel, elementum odio. Proin eu tempus tellus. Donec auctor turpis faucibus, aliquet purus non, fringilla ex. Nullam tempus dui et velit ornare, vel laoreet sapien mattis. Sed ultrices porta sem ut ullamcorper. Suspendisse dolor turpis, tempor sed metus sit amet, lacinia porta nisi. Maecenas porta maximus tellus, eu sollicitudin mauris facilisis malesuada. Nunc ullamcorper felis molestie commodo dictum. Fusce porta orci at urna efficitur, non pretium augue fermentum. Nunc eleifend cursus tellus in hendrerit. Suspendisse ut justo nec orci lacinia dapibus quis et est. Donec vulputate ante et consectetur accumsan. Nunc bibendum risus sit amet sodales varius. Praesent luctus ac ligula eu semper. Nunc gravida imperdiet mauris, eu iaculis tellus ultrices ac. Curabitur ac rutrum diam. Donec at rhoncus leo. Aenean tempor consectetur sem. Nulla leo urna, gravida a gravida et, lacinia a ante. Sed vel commodo lacus. Donec sodales condimentum aliquet. Donec iaculis nisl nulla, nec auctor tortor consequat in. Donec nec arcu diam. In vitae scelerisque augue, eu sodales lectus. Sed dictum malesuada lectus sed viverra. Aliquam lacinia massa quis est lobortis, vitae sodales diam scelerisque. Integer congue, nibh rutrum eleifend feugiat, dui justo varius dui, vitae commodo ex risus eu sapien. Sed id ultricies magna, a suscipit nibh. Phasellus nisi erat, ultricies at nunc vitae, condimentum volutpat neque. Maecenas nec bibendum augue, id accumsan nibh. Vestibulum ornare leo vitae orci ullamcorper, vitae maximus massa dictum. Praesent rhoncus lectus vel mi sagittis tempus. Cras eros massa, efficitur at lobortis et, ornare vitae tortor. Morbi ipsum velit, lobortis in dui eget, tempor ultricies eros. Curabitur et aliquam sapien, a aliquam arcu. Phasellus tempus porttitor ligula in mollis. Maecenas venenatis sem mollis elementum rutrum. In dapibus est mi. Cras quis porta libero. Aliquam auctor tellus in ligula vehicula, vel volutpat mauris ultricies. Nunc vitae justo sagittis, congue felis quis, mattis sem. Nullam eu tortor nibh. Curabitur pellentesque enim vel orci placerat, vitae bibendum massa laoreet. In eu auctor turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus id mattis arcu, et imperdiet urna. Proin at sagittis augue, et tempus dui. Cras consequat ultricies dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce auctor lectus mi, in eleifend felis fermentum non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In pharetra pellentesque euismod. Suspendisse ut orci tincidunt, cursus ante vel, molestie sem. Nulla sodales velit a erat tempus, non dapibus leo convallis. Aenean libero mauris, auctor quis consectetur vitae, tincidunt quis nisl. Etiam dignissim sagittis mattis. Curabitur euismod, nisi vitae auctor euismod, lectus enim gravida mi, viverra porttitor lectus diam euismod sapien. Nunc et lacus sapien. Curabitur arcu tortor, congue ac lorem eget, suscipit eleifend mauris. Vivamus cursus libero nec ante euismod, ut euismod ipsum iaculis. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed neque sollicitudin, sollicitudin nibh vel, elementum odio. Proin eu tempus tellus. Donec auctor turpis faucibus, aliquet purus non, fringilla ex. Nullam tempus dui et velit ornare, vel laoreet sapien mattis. Sed ultrices porta sem ut ullamcorper. Suspendisse dolor turpis, tempor sed metus sit amet, lacinia porta nisi. Maecenas porta maximus tellus, eu sollicitudin mauris facilisis malesuada. Nunc ullamcorper felis molestie commodo dictum. Fusce porta orci at urna efficitur, non pretium augue fermentum. Nunc eleifend cursus tellus in hendrerit. Suspendisse ut justo nec orci lacinia dapibus quis et est. Donec vulputate ante et consectetur accumsan. Nunc bibendum risus sit amet sodales varius. Praesent luctus ac ligula eu semper. Nunc gravida imperdiet mauris, eu iaculis tellus ultrices ac. Curabitur ac rutrum diam. Donec at rhoncus leo. Aenean tempor consectetur sem. Nulla leo urna, gravida a gravida et, lacinia a ante. Sed vel commodo lacus. Donec sodales condimentum aliquet. Donec iaculis nisl nulla, nec auctor tortor consequat in. Donec nec arcu diam. In vitae scelerisque augue, eu sodales lectus. Sed dictum malesuada lectus sed viverra. Aliquam lacinia massa quis est lobortis, vitae sodales diam scelerisque. Integer congue, nibh rutrum eleifend feugiat, dui justo varius dui, vitae commodo ex risus eu sapien. Sed id ultricies magna, a suscipit nibh. Phasellus nisi erat, ultricies at nunc vitae, condimentum volutpat neque. Maecenas nec bibendum augue, id accumsan nibh. Vestibulum ornare leo vitae orci ullamcorper, vitae maximus massa dictum. Praesent rhoncus lectus vel mi sagittis tempus. Cras eros massa, efficitur at lobortis et, ornare vitae tortor. Morbi ipsum velit, lobortis in dui eget, tempor ultricies eros. Curabitur et aliquam sapien, a aliquam arcu. Phasellus tempus porttitor ligula in mollis. Maecenas venenatis sem mollis elementum rutrum. In dapibus est mi. Cras quis porta libero. Aliquam auctor tellus in ligula vehicula, vel volutpat mauris ultricies. Nunc vitae justo sagittis, congue felis quis, mattis sem. Nullam eu tortor nibh. Curabitur pellentesque enim vel orci placerat, vitae bibendum massa laoreet. In eu auctor turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus id mattis arcu, et imperdiet urna. Proin at sagittis augue, et tempus dui. Cras consequat ultricies dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce auctor lectus mi, in eleifend felis fermentum non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In pharetra pellentesque euismod. Suspendisse ut orci tincidunt, cursus ante vel, molestie sem. Nulla sodales velit a erat tempus, non dapibus leo convallis. Aenean libero mauris, auctor quis consectetur vitae, tincidunt quis nisl. Etiam dignissim sagittis mattis. Curabitur euismod, nisi vitae auctor euismod, lectus enim gravida mi, viverra porttitor lectus diam euismod sapien. Nunc et lacus sapien. Curabitur arcu tortor, congue ac lorem eget, suscipit eleifend mauris. Vivamus cursus libero nec ante euismod, ut euismod ipsum iaculis. Suspendisse potenti. </div> </div> 

I have also inserted a jsfiddle link:

https://jsfiddle.net/gwkudae8/

Answer 1

This is because your code changes content of that div to text... the easiest way to fix it would be to change text() to html() like this:

function searchAndHighlight(searchTerm) {
    if (searchTerm) {
        var searchTermRegEx, matches;
        var  selector= "#pageContent";
        $(selector+' span.match').each(function(){
        $(this).replaceWith($(this).html());
      });
        try {
            searchTermRegEx = new RegExp('('+searchTerm+')', "ig");
        } catch (e) {
            return false;
        }
        $('.highlighted').removeClass('highlighted');
        matches = $(selector).html().match(searchTermRegEx);
        if (matches !==null && matches.length > 0) {
            var txt = $(selector).html().replace(searchTermRegEx, '<span class="match">$1</span>');
            $(selector).html(txt);
            searchIndex++;
            $('.match:first').addClass('highlighted');
           $(document).scrollTop($('.match').eq(searchIndex).offset().top);

          return true;
        }
      return false;
    }
  return false;
}

https://jsfiddle.net/gwkudae8/5/

Please note that then it will have problems with searching "some phrase" when it will be partially formatted like " some <span>phrase</span> " and there is no easy way to fix that.