按单标记返回的标记结果

我正在从<div>标记搜索文本。问题是，当我搜索时，所有我的<div>数据来到一行。按单标记返回的标记结果

在小提琴，类型突破然后按搜索。为什么<div>内容不保存其格式？

这里是我的代码：

var searchIndex = -1; 
var searchTermOld =''; 

$(document).ready(function(){ 
    $('.searchbox').on('change',function(){ 
     if($(this).val()===''){ 
      var selector = "#realTimeContents"; 
      $(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= "#realTimeContents"; 
     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(); 
      if(searchTerm==''){ 
       PG_alert("Please Insert Text.") 
       return; 
      } 

      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= "#realTimeContents"; 
     $(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'); 

       if($('.match').eq(searchIndex).offset().top > $(window).height()-10){ 
        $(document).scrollTop($('.match').eq(searchIndex).offset().top); 
       } 

       return true; 
      }else{ 
       PG_alert('Search not found.'); 
      } 

      return false; 
    } 

    return false; 
} 

function searchNext(){ 
    searchIndex++; 
    if (searchIndex >= $('.match').length) 
     searchIndex = 0; 

    $('.highlighted').removeClass('highlighted'); 
    $('.match').eq(searchIndex).addClass('highlighted'); 

    if($('.match').eq(searchIndex).offset().top > $(window).height()-10){ 
     $(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'); 

    if($('.match').eq(searchIndex).offset().top > $(window).height()-10){ 
     $(document).scrollTop($('.match').eq(searchIndex).offset().top); 
    } 
}

来源

2013-07-25 Rohit

的问题是这一行：

var txt = $(selector).text().replace(searchTermRegEx, '<span class="match">$1</span>');

您没有保留那些原始文本的一部分的HTML标记。当你检索.text（）时，你会得到一个结果，所有的标签被删除。要解决这个问题，您只需要使用文本的html代替：

var txt = $(selector).html().replace(searchTermRegEx, '<span class="match">$1</span>');

来源

2013-07-25 17:33:43 Lochemage

按单标记返回的标记结果

回答

相关问题