正則表達式和字符串替換中的難以捉摸的錯誤

我寫了一個簡單的javascript搜索器，並遇到了一些不匹配/錯誤匹配以及可能較差的css類匹配問題。正則表達式和字符串替換中的難以捉摸的錯誤

如果我點擊第一個例子「代碼」（其過濾至一個元件），那麼在「造型」鏈接時，「代碼」高照明仍然存在。不用說這是不可取的。

我認爲問題會發生在代碼的過濾部分，但對我來說這一切看起來相當不錯。特別是因爲我抓住標題的文本而不是HTML的文本，然後添加一個新的跨度。

function filter(searchTerm) { 
    var searchPattern = new RegExp('(' + searchTerm + ')', 'ig'); // The brackets add a capture group 

    entries.fadeOut(150, function() { 
     noResults.hide(); 

     $('header', this).each(function() { 
      $(this).parent().hide(); 

      // Clear results of previous search 
      $('li', this).removeClass('searchMatchTag'); 

      // Check the title 
      $('h1', this).each(function() { 
       var textToCheck = $('a', this).text(); 
       if (textToCheck.match(searchPattern)) { 
        textToCheck = textToCheck.replace(searchPattern, '<span class="searchMatchTitle">$1</span>'); //capture group ($1) used so that the replacement matches the case and you don't get weird capitolisations 
        $('a', this).html(textToCheck); 
        $(this).closest('.workshopentry').show(); 
       } 
      }); 

      // Check the tags 
      $('li', this).each(function() { 
       if ($(this).text().match(searchPattern)) { 
        $(this).addClass('searchMatchTag'); 
        $(this).closest('.workshopentry').show(); 
       } 
      }); 
     }); 

     if ($('.workshopentry[style*="block"]').length === 0) { 
      noResults.show(); 
     } 

     entries.fadeIn(150); 
    }); 
}

其他一些組合使這種情況發生，但其他一些組合卻沒有，這使我很難追查這個特定問題的原因。如果任何人可以看看，並提供一些反饋，將不勝感激。

來源

2012-11-21 Hyposaurus

結果我錯過了一個檢查以刪除以前的匹配標籤。

  var textToCheck = $('a', this).text(); 
      if (textToCheck.match(searchPattern)) { 
       textToCheck = textToCheck.replace(searchPattern, '<span class="searchMatchTitle">$1</span>'); //capture group ($1) used so that the replacement matches the case and you don't get weird capitolisations 
       $('a', this).html(textToCheck); 
       $(this).closest('.workshopentry').show(); 
      } else { 
       $('a', this).html(textToCheck); 
      }

來源

2012-12-05 12:47:44 Hyposaurus

生成searchPattern而不逃避searchTerm可能是一個問題。 .*的searchTerm可匹配任何內容。

如何使用var match = textToCheck.indexOf(searchTerm) >= 0代替？

這將返回文本中子串searchTerm的第一個實例的索引，否則返回-1。

來源

2012-11-21 06:40:29

如果不進行適當的引用，則無法使用正則表達式來信任用戶輸入。考慮使用報價函數是這樣的：

var rePattern = searchTerm.replace(/[.?*+^$\[\]\\(){}|]/g, "\\$&"), 
searchPattern = new RegExp('(' + rePattern + ')', 'ig'); // The brackets add a capture group

編輯

正如在評論中提到的，爲什麼捕獲括號被用來執行搜索目前還不清楚;您可以使用$&作爲替換模式。當然，我會理解你是否簡化了這篇文章的正則表達式:)

來源

2012-11-21 06:53:03

如果您使用'$＆'作爲替換，則根本不需要捕獲圓括號。 –

@Tim你的意思是'$＆' – Tomalak

@Tomalak：嗨，我一直忘記這一點。固定。 –

正則表達式和字符串替換中的難以捉摸的錯誤

回答

相關問題