按單標記返回的標記結果

我正在從<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

按單標記返回的標記結果

回答

相關問題