javascript - 使用 jQuery 突出显示搜索词，例如 Chrome

Question

我最近用 jQuery 和一个突出显示插件做了一个非常简单的突出显示。它看起来像这样:

$('myButton').click(function() {

$('body').highlight($('#myInputText').val());

});

但我想知道我怎样才能像高亮显示一样在 Chrome 中显示，我的意思是每当我在文本框中输入一些字母而不提交时突出显示这些字母。我想也许可以使用 keyup 事件……有什么想法吗？

谢谢 Andy，我在您的代码中将“this[0]”更改为“search[i]”，如果只有一个“p”标签，它就可以工作

$(document).ready(function(){
  var search = ['p', 'div', 'span'];

  $("#highlighter").bind('keyup', function(e){
    var pattern = $(this).val();

    $.each(search, function(i){
        var str = search[i];        
        var orgText = $(str).text();

        orgText = orgText.replace(pattern, function($1){
          return "<span style='background-color: red;'>" + $1 + "</span>"
        });

        $(str).html(orgText);
    });    
  });
});

Answer 1

我用它做了快速练习，代码:

    $(document).ready(function(){
    var search = ['p', 'div', 'span'];

    $("#highlighter").bind('keyup', function(e){
    var pattern = $(this).val();

    $.each(search, function(i){
        var str = this[0];        
        var orgText = $(str).text();

        orgText = orgText.replace(pattern, function($1){
          return "<span style='background-color: red;'>" + $1 + "</span>"
        });

        $(str).html(orgText);
    });    
  });
});​​

链接:http://jsbin.com/amica3/edit