從jquery頁面搜索文本時出現錯誤（不自然的功能）？

Question

我正在從頁面搜索文本。一切安好。但只有一個問題，當用戶搜索&搜索它也將數據與放追加。你能告訴我爲什麼會發生嗎？

這裏是我的小提琴：http://jsfiddle.net/ravi1989/wjLmx/22/

請輸入&，然後點擊搜索，然後再次單擊搜索，搜索，查找下一個問題。

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()); 

      $(selector).html($(selector).html().replace(searchTermRegEx, "<span class='match'>" + searchTerm + "</span>")); 
      $('.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');     
      }); 
      $('.previous_h').off('click').on('click', function() { 

       i--; 

       if(i < 0) 
        i=$('.match').length-1; 

        $('.match').removeClass('highlighted'); 
        $('.match').eq(i).addClass('highlighted'); 
      }); 




      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

在HTML中，以獲得字符&，您可以使用字符實體：&。所以當搜索HTML文本時，你一定會找到那些（你也可以找到<和 和其他字符實體）。您的代碼正在這個HTML：

& 

...它更改爲：

<span class="match highlighted">&</span>amp; 

...等你看到在文本中amp;。

這是與該代碼的一個普遍問題的一個具體例子。不幸的是，我認爲代碼所採用的方法太複雜了，無法糾正。我認爲爲了解決這類問題，你不得不在HTML中進行替換。取而代之的是，通過在所述匹配元件的text nodes，並執行替換他們nodeValue s，這將是正常的字符串（只包含&等），而不是HTML編碼的實體循環。你將不得不使用splitText分割文本節點（兩次，之前和您要更換後的文字），然後把你通過createElement創建span裏面的中間位，在第二分割點的前面插入span 。

這將是通用的解決方案：不要試圖對HTML做replace。

現在，你可以很容易地解決這個具體錯誤，通過把該行之前做的HTML替換：Fiddle

if (searchTerm === "&") { 
    searchTerm = "&"; 
    searchTermRegEx = new RegExp(searchTerm, "ig"); 
} 

...但是，這不會解決一般問題。解決一般問題可能需要徹底改變你的方法，使用文本節點和前面描述的那樣。

---

備註：您正在將用戶的搜索條件直接傳遞給RegExp構造函數。你真的希望你的用戶能夠正確輸入正則表達式嗎？例如，如果他們鍵入[，則結果將是無效的正則表達式。如果你想從字面上搜索他們輸入的內容，你必須要麼不使用正則表達式，要麼在正則表達式中轉義特殊字符。