Функция поиска не очищается

Question

У меня есть эта функция поиска, которая выделяет вводимый текст, и я хотел бы очистить введенное значение еще одним нажатием кнопки. Я пробовал несколько функций, включая

$('#searchInput').val("");

Выше очищает поле ввода, но не текст, выделенный в DOM. Мы ценим любые предложения. Спасибо.

$(document).ready(function() {
  $("#searchInput").on("keyup change", function(e) {
    var text = $.trim($(this).val());
    if (text !== "" && text !== " ") {
      var pattern = new RegExp(text, "gi");
    } else {
      $(".accordian-holder").removeClass("displayNone");
      $(".accordian-holder")
        .children("article")
        .removeClass("displayNone");
    }
    $(".searchtext, .searchtabsheading").each(function(i) {
      var str = this;
      var orgText = $(str).text();
      orgText = orgText.replace(pattern, function($1) {
        return (
          "<span style='color: rgb(53, 53, 53); background: rgb(255, 255, 255);'>" +
          $1 +
          "</span>"
        );
      });
      $(str).html(orgText);
    });
  });
});

Answer 1

Самый простой способ добиться этого - поместить class в добавляемый вами span. Затем вы можете выбрать span, если хотите очистить выделение, и просто unwrap() его содержимое. Попробуйте это:

$("#searchInput").on("keyup change", function(e) {
  var text = $.trim($(this).val());
  if (text !== "" && text !== " ") {
    var pattern = new RegExp(text, "gi");
  } else {
    $(".accordian-holder, .accordian-holder article").removeClass("displayNone");
  }
  
  $(".searchtext, .searchtabsheading").each(function(i) {
    var str = this;
    var orgText = $(str).text();
    orgText = orgText.replace(pattern, function($1) {
      return '<span class="highlight">' + $1 + '</span>'
    });
    $(str).html(orgText);
  });
});

$('#clear').click(function() {
  $('#searchInput').val('');
  $('.highlight').contents().unwrap();
});

.highlight {
  color: #C00;
  background-color: #CC0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="searchInput"  />
<button type="button" id="clear">Clear</button>
<div class="searchtext">
  Lorem ipsum dolor sit amet consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipiscing elit.
</div>

Обратите внимание, что я изменил цвета подсветки для этого примера, поскольку они не были видны в редакторе фрагментов.