Question

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

$（'myButton'）。click（function（）{
     。
$（ '主体'）突出显示（$（ '＃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);
    });    
  });
});

link：http://jsbin.com/amica3/edit

Answer 2

$('#myInputText').keypress(function(e) {
    switch (e.keyCode) {
        case 13: // "Enter" was pressed; handle it if you want
            return false;

        case 27: // ESC was pressed; handle it if you want
            return false;
    }

    $('body').highlight($(this).val());
});

Answer 3

我编辑了JAndy的代码，因此结果将匹配文本中的所有出现，搜索不会区分大小写。 Link 希望有人发现这个有用的

使用jQuery突出显示Chrome等搜索词

3 个答案: