突出顯示字符串中的單詞

Question

我得到了一定的字符串，並且我想突出顯示在文本輸入中鍵入的子字符串。

這裏是一個小提琴：http://jsfiddle.net/rFGWZ/17/

它只是工作正常，當我鍵入初始字符串，但是當我型鐵。 15在輸入時，它不會突出顯示15，而是21而是......它總是突出顯示開始時的數字，所以有人可以幫我修改它，所以它會突出顯示我在文本輸入中輸入的字符串？

Answer 1

你可以使用這樣的：

firstCell.html(id.replace(value, '<span class=highlight>'+value+'</span>')); 

代替

firstCell.html($("<span />").addClass("highlight").text(id.slice(0, value.length))); 
firstCell.append(id.slice(value.length, id.length)); 

演示：http://jsfiddle.net/qgBt8/

編輯：case insensitive version

Answer 2

我會用正則表達式來解決這個問題。這也考慮到了字符的情況。

jsFiddle

$("#search").on("keyup", function() { 
    var value = $(this).val(); 

    $("table tr").each(function(index) { 
     if (index !== 0) { 

      $row = $(this); 
      var firstCell = $row.children("td:first"); 

      var id = $row.children("td:first").text(); 
      if (id.indexOf(value) === -1) { 
       $row.children("td:first").text(id); 
       $row.hide(); 
      } 
      else { 
       var re = new RegExp(value, "g"); //global replace 
       firstCell.html(id.replace(re, "<span class=\"highlight\">" + value + "</span>"));//replace all instances of the characters 
       $row.show(); 
      } 
     } 
    }); 
});​