javascript - 单击时JQuery搜索下一个和上一个文本出现更改格式

Question

我已经实现了一个具有下一个和上一个功能的搜索功能当用户点击 search 时，第一个出现将被突出显示，然后当单击下一个按钮时，下一个出现被突出显示并且前一个的突出显示被删除。这也是在按下前一个按钮时完成的。我遇到的问题是，当我单击 3 个按钮中的任何一个时，页面的格式会发生变化。如何更改此设置，以便当我搜索或单击下一个/上一个时，按钮可以工作，但网页的格式不会改变？

以下是我的代码：

 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>

我还插入了一个 jsfiddle 链接：

https://jsfiddle.net/gwkudae8/

标签： javascriptjquery

Answer 1

这是因为您的代码将该 div 的内容更改为文本...修复它的最简单方法是更改text()​​为html()：

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/

请注意，当它部分格式化为“”时，搜索“某些短语”时会出现问题，some <span>phrase</span>并且没有简单的方法来解决这个问题。