Как я могу отфильтровать и пометить слова из ввода без отображения html разметки?

Question

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

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myDIV>*").map(function() {
      var el = $(this);
      var content = el.html().replace(/(<span class="highlighted">)|(<\/span>)/g, "");
      el.html(content);
      var hasText = el.text().toLowerCase().indexOf(value) > -1;
      el.toggle(hasText);
      if (hasText) {
        // escape value for use in regex
        var textRegex = new RegExp(value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g");
        el.html(content.replace(textRegex, '<span class="highlighted">$&</span>'));
      }
    });
  });
});

.highlighted {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="myInput" />
<!-- the new search -->
<div id="myDIV">
  <p>This is a test</p>

  <ul>
    <li>This is a list item</li>
    <li>This is a another list item</li>
  </ul>

  <a href="">This is a link</a>

</div>

Этот код, он будет принимать только тег абзаца. Кто-нибудь знает, почему?

Спасибо

Answer 1

Самый чистый подход, rest div и start again. Поэтому перед стартом я взял snapshot of div и save it. Каждый раз данные change I reconstruct это. Легко понять и масштабировать.

Предложение: Пользовательский интерфейс должен управляться данными. Не HTML / контент-ориентированный. Вы можете создать список данных и построить на каждое изменение.

Оформить заказ на моем втором примере

Не изменять состояние / пользовательский интерфейс [React]

$(document).ready(function () {
  const div = $("#myDIV").html();
  $("#myInput").on("keyup", function () {
    var value = $(this).val().toLowerCase();
    $("#myDIV").html(div); //Reset
    const p = $("#myDIV p");
    var hasText = p.text().toLowerCase().indexOf(value) > -1;
    hasText && highlight(p, value);
    $("#myDIV li").map(function () {
      var el = $(this);
      var hasText = el.text().toLowerCase().indexOf(value) > -1;
      if (hasText) {
        highlight(el, value);
      } else {
        el.remove();
      }
    });
  });
});
function highlight(elm, text) {
  elm.html(
    elm
      .html()
      .replace(new RegExp(`(${text})`), '<span class="highlighted">$1</span>')
  );
}

.highlighted {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="myInput" />
<!-- the new search -->
<div id="myDIV">
    <p>This is a test</p>
    <ul>
        <li>This is a list item</li>
        <li>This is a another list item</li>
    </ul>
    <a href="">This is a link</a>
</div>

Использование подхода, управляемого данными.

$(document).ready(function () {
  const list = ["This is a list item", "This is a another list item"];
  function buildUi(keyword) {
    $("#filter .list").html("")
    list.forEach((text) => {
      if (!keyword || text.toLowerCase().indexOf(keyword) !== -1) {
        text = text.replace(
          new RegExp(`(${keyword})`),
          '<span class="highlighted">$1</span>'
        );
      } else {
        return;
      }
      const li = $(`<li>${text}</li>`);
      $("#filter .list").append(li);
    });
  }
  buildUi("");
  $("#myInput").on("keyup", function () {
    const keyword = $(this).val().toLowerCase()
    buildUi(keyword)
  });
});

.highlighted {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="myInput" />
<!-- the new search -->
<div id="filter">
    <p>This is a test</p>
    <ul class="list">
    </ul>
    <a href="">This is a link</a>
</div>

Answer 2

Работает с любым элементом внутри элемента с идентификатором 'myDIV' на первом уровне (не глубоко), потому что вы используете этот селектор $("#myDIV>*"). Убедитесь, что ваш тег находится внутри этого правила.

ОБНОВЛЕНИЕ С НОВОЙ ИНФОРМАЦИЕЙ

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    
    // Remove all class="highlighted" inside #myDIV 
    $("#myDIV").html($("#myDIV").html().replace(/(<span class="highlighted">)|(<\/span>)/g, ""))
    
    $("#myDIV *").map(function() {
        var el = $(this);
        // Only in deep children aplly your logic
        if (el.children().length == 0) {
        var content = el.html().replace(/(<span class="highlighted">)|(<\/span>)/g, "");
        el.html(content);
        var hasText = el.text().toLowerCase().indexOf(value) > -1;
        el.toggle(hasText);
        if (hasText) {
          // escape value for use in regex
          var textRegex = new RegExp(value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g");
          el.html(content.replace(textRegex, '<span class="highlighted">$&</span>'));
        }
      }
    });
  });
});

.highlighted {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="myInput" />
<!-- the new search -->
<div id="myDIV">
  <p>This is a test</p>

  <ul>
    <li>This is a list item</li>
    <li>This is a another list item</li>
  </ul>

  <a href="">This is a link</a>

</div>

Необходимо применить изменения для глубоких детей. и убрать подсветку класса в начале

Answer 3

Привет, ребята, так что я нашел то, что искал, благодаря помощи отличных ребят и большому удару головой, этот скрипт работает для локального поиска и фильтрации веб-страниц, он должен работать в сочетании с jsquery mini и Hilitor. js файл. Это должно чего-то стоить кому-то там. Счастливые парни кодирования.

<script src="../js/hilitor.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
window.addEventListener("DOMContentLoaded", function(e) {
    var myHilitor2 = new Hilitor("playground");
    myHilitor2.setMatchType("left");
    document.getElementById("keywords").addEventListener("keyup", function(e) {
      myHilitor2.apply(this.value);
    }, false);
  }, false);
$(document).ready(function(){
  $("#keywords").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#playground *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

<label>Search And Filter</label><input id="keywords" type="text" placeholder="Search And Filter.." onKeyDown="if(event.keyCode === 32) return false;">

<div id="playground" > 
<ul>
 <li>Hey diddle diddle,</li>
<li>The cat and the fiddle,</li>
<li>The cow jumped over the moon.</li>
<li>The little dog laughed to see such sport,</li>
<li>And the dish ran away with the spoon.</li>
 </ul>
</div>