javascript - 搜索 div 时突出显示结果

Question

我有一个像这样的 div 设置:

<input id="search">

<div class="entry">
  <div class="title">hello world test 123</div>
  <div class="description">lorem ipsum test test1 testing</div>
</div>

<div class="entry">
  <div class="title">attack on titan</div>
  <div class="description">fullmetal alchemist</div>
</div>

并且我允许用户通过以下方式搜索 div:

jQuery(document).ready(function() {
    jQuery("#search").on("keyup click input", function () {
        var val = jQuery(this).val();
        if (val.length) {
            jQuery(".entry").hide().filter(function () {
                return jQuery('.title, .description',this).text().toLowerCase().indexOf(val.toLowerCase()) != -1;
            }).show();
        }
        else {
            jQuery(".entry").show();
        }
    });
});

效果很好，试试 jsFiddle .

我的问题是，如何突出显示搜索词？例如，如果用户搜索 test , 我想换行 test进入<span>标签。

编辑:请注意，我知道如何搜索/替换文本，但我似乎无法使其与我的搜索功能一起正常工作。

Answer 1

优化方案

在评论中讨论了所有问题并尝试优化解决方案以使其不会缺少最终错误之后，我重构了代码并对其进行了优化:

$(document).ready(function() {
  $("#search").on("keyup click input", function() {
    var val = jQuery(this).val();
    var regExp = new RegExp(val, 'ig');
    var reg = new RegExp('<span class="highlight">(.+)<\/span>', 'ig');
    if (val.length) {
      $(".entry").hide().filter(function() {
        var found = $('.title, .description', this).text().toLowerCase().indexOf(val.toLowerCase()) != -1;
        if (val.length > 3) {
          $('.title, .description', this).each(function(k, v) {
            if ($(v).text().match(regExp)) {
              $(v).html($(v).text().replace(regExp, '<span class="highlight">$&</span>'));
            } else {
              $(v).html($(v).text().replace(reg, '$&'));
            }
          });
        } else {
          $('.title, .description', this).each(function(k, v) {
            $(v).html($(v).text().replace(reg, '$&'));
          });
        }
        return found;
      }).show();
    } else {
      $('.title, .description').each(function(k, v) {
        $(v).html($(v).text().replace(reg, '$&'));
      });
      $(".entry").show();
    }
  });
});

.highlight {
  background-color: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search">

<div class="entry">
  <div class="title">hello world test 123</div>
  <div class="description">lorem ipsum test test1 testing</div>
</div>

<div class="entry">
  <div class="title">attack on titan</div>
  <div class="description">fullmetal alchemist</div>
</div>

它遍历元素并使用带有匹配组的 RegExp，如果迭代的元素内容与 Regex 匹配，则用包含在 span 中的相同内容替换匹配的文本，否则只需将内容设置为其原始形式。

---

原始答案

这是你应该做的:

    var val = jQuery(this).val();
    if (val.length) {
      $(".entry").hide().filter(function() {
        var found = $('.title, .description', this).text().toLowerCase().indexOf(val.toLowerCase()) != -1;
        var regExp = new RegExp(val, 'ig');
        $('.title, .description', this).each(function(k, v) {
          if ($(v).text().toLowerCase().indexOf(val.toLowerCase()) != -1) {
            var newHTML = $(v).text().replace(regExp, '<span class="highlight">$&</span>');
            $(v).html(newHTML);
          }
        });
        return found;
      }).show();
    } else {
      $(".entry").show();
    }

您需要遍历元素并使用带有匹配组的 RegExp，如果此元素内容与您的 Regex 匹配，则用包含在跨度中的相同内容替换匹配的文本。

演示:

这是一个工作演示:

$(document).ready(function() {
  $("#search").on("keyup click input", function() {
      var val = jQuery(this).val();
      if (val.length) {
        $(".entry").hide().filter(function() {
            var found = $('.title, .description', this).text().toLowerCase().indexOf(val.toLowerCase()) != -1;
            var regExp = new RegExp(val, 'ig');
              $('.title, .description', this).each(function(k, v) {
                if ($(v).text().toLowerCase().indexOf(val.toLowerCase()) != -1) {
                  var newHTML = $(v).text().replace(regExp, '<span class="highlight">$&</span>');
                  $(v).html(newHTML);
                }
              });
          return found;
        }).show();
    } else {
      $('.title, .description').each(function(k, v) {
        var reg = new RegExp('<span class="highlight">(.+)<\/span>', 'ig');
        var newHTML = $(v).text().replace(reg, '$&');
        $(v).html(newHTML);
      });
      $(".entry").show();
    }
  });
});

.highlight {
  background-color: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search">

<div class="entry">
  <div class="title">hello world test 123</div>
  <div class="description">lorem ipsum test test1 testing</div>
</div>

<div class="entry">
  <div class="title">attack on titan</div>
  <div class="description">fullmetal alchemist</div>
</div>

编辑:

这是一个仅在输入超过 2 个字母时才突出显示句子的演示:

$(document).ready(function() {
  $("#search").on("keyup click input", function() {
    var val = jQuery(this).val();
    if (val.length) {
      $(".entry").hide().filter(function() {
        var found = $('.title, .description', this).text().toLowerCase().indexOf(val.toLowerCase()) != -1;
        var regExp = new RegExp(val, 'ig');
        if (val.length > 2) {
          $('.title, .description', this).each(function(k, v) {
            if ($(v).text().toLowerCase().indexOf(val.toLowerCase()) != -1) {
              var newHTML = $(v).text().replace(regExp, '<span class="highlight">$&</span>');
              $(v).html(newHTML);
            }
          });
        } else {
          $('.title, .description').each(function(k, v) {
            var reg = new RegExp('<span class="highlight">(.+)<\/span>', 'ig');
            var newHTML = $(v).text().replace(reg, '$&');
            $(v).html(newHTML);
          });
        }
        return found;
      }).show();
    } else {
      $('.title, .description').each(function(k, v) {
        var reg = new RegExp('<span class="highlight">(.+)<\/span>', 'ig');
        var newHTML = $(v).text().replace(reg, '$&');
        $(v).html(newHTML);
      });
      $(".entry").show();
    }
  });
});

.highlight {
  background-color: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search">

<div class="entry">
  <div class="title">hello world test 123</div>
  <div class="description">lorem ipsum test test1 testing</div>
</div>

<div class="entry">
  <div class="title">attack on titan</div>
  <div class="description">fullmetal alchemist</div>
</div>