javascript - 突出显示文本的搜索遇到特殊字符问题

Question

我从一个我不记得 URL 的博客中获取了这段代码。该代码应该在包含许多部分的列表中找到用户在输入字段中编写的文本。如果匹配，文本将突出显示；如果没有匹配，整个部分将隐藏。
我做了一个plunker，所以你可以看看它是如何工作的：这是链接

这是JS代码：

$(document).ready(function() {
  var $container = $('#global_div');
  if (!$container.length) return true;

  var $input = $('#searcher'),
    $notfound = $('.not-found'),
    $items = $container.find('.row'),
    $item = $(),
    itemsIndexed = [];

  $items.each(function() {
    itemsIndexed.push($(this).text().replace(/\s{2,}/g, ' ').toLowerCase());
  });

  $input.on('keyup', function(e) {

    $items.each(function() {
      $item = $(this);
      $item.html($item.html().replace(/<span class="highlight">([^<]+)<\/span>/gi, '$1'));
    });

    var searchVal = $.trim($input.val()).toLowerCase();
    if (searchVal.length) {
      for (var i in itemsIndexed) {
        $item = $items.eq(i);
        if (itemsIndexed[i].indexOf(searchVal) != -1)
          $item.removeClass('is-hidden').html($item.html().replace(new RegExp(searchVal + '(?!([^<]+)?>)', 'gi'), '<span class="highlight">$&</span>'));
        else
          $item.addClass('is-hidden');
      }
    } else $items.removeClass('is-hidden');

    $notfound.toggleClass('is-visible', $items.not('.is-hidden').length == 0);
  });

});

到目前为止一切顺利，但问题是当 html 文本中有某些字符或在输入字段中写入一些特殊字符时。请打开 plunker，以便您进行我将要告诉您的测试：

写下字母“a”、“s”或“n”时，您可以看到它是如何显示html的&amp ;和的。&nbsp ;同样在写下“&”时，写下“。”时整个事情都会中断。（观点）。

由于我无法解决此问题，我添加了此代码以避免人们在输入中写入特殊字符（此代码不在 plunker 中，因此您可以测试错误）：

$("#searcher").keypress(function(event) {
    var character = String.fromCharCode(event.keyCode);
    return isValid(character);     
});
function isValid(str) {
    return !/[~`!@#$%\^&*()+=\-\[\]\\';/{}|\\":.<>\?]/g.test(str);
}

但是，当 html 中存在和之类的字符并且用户在输入字段中写入字母“a”、“s”或“n”时仍然存在问题&amp ;......&nbsp ;或者取决于 html 上还有哪些其他奇怪的字符。

标签： javascriptjquery