Поиск, который выделяет текст, имеет проблемы со специальными символами

Question

Я взял этот код из блога, URL которого не помню.Код должен найти в списке со многими разделами текст, написанный пользователем в поле ввода.Если есть совпадение, текст будет выделен;а если совпадений нет, весь раздел будет скрыт.
Я сделал плунжер , чтобы вы могли увидеть, как он работает: Вот ссылка

Это код 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-тексте есть определенные символы или когда в поле ввода есть какие-то специальные символы.Пожалуйста, откройте поршень, чтобы вы могли выполнить тесты, которые я собираюсь вам сказать:

Когда вы записываете буквы «a», «s» или «n», вы можете увидеть, как он показывает &amp ; и &nbsp ; HTML.Кроме того, когда записываете «&», и все это ломается при написании «.»(точка).

Поскольку я не мог это исправить, я добавил этот код, чтобы люди не могли писать специальные символы во входных данных (этот код отсутствует в «плунжере», поэтому вы можете проверить ошибки):

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

Но по-прежнему существует проблема, когда в html есть такие символы, как &amp ; и &nbsp ;, а пользователи вводят в поле ввода букву «a», «s» или «n»... или в зависимости от того, какой другой странный символ будет в HTML.