Javascript-форум - Как отладить скрипт поиска?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как отладить скрипт поиска? (https://javascript.ru/forum/dom-window/75502-kak-otladit-skript-poiska.html)

Как отладить скрипт поиска?

Всем привет.
Подскажите, как отладить скрипт?

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <style>
      #search {
        min-height: 2rem;
        padding-right: 1rem;
        padding-left: 1rem;
        color: #212529 !important;
        border: 1px solid #f2f5f9;
        background-color: #fff;
      }

      span.hot {
        color: #18ad67;
      }

    </style>

    <p><input id="search" type="search" placeholder="Введите наименование или автора">
    </p>

    <table class='table'>
      <thead>
        <th>image</th>
        <th>links</th>
        <th>title</th>
        <th>title</th>
      </thead>
      <tbody>
        <tr>
          <td><img src="https://via.placeholder.com/32x32" alt=""></td>
          <td><a href='#'>link 2</a></td>
          <td>text 3</td>
          <td>text 4</td>
        </tr>
        <tr>
          <td><img src="https://via.placeholder.com/32x32" alt=""></td>
          <td><a href='#'>link 2</a></td>
          <td>text 3</td>
          <td>text 4</td>
        </tr>
        <tr>
          <td><img src="https://via.placeholder.com/32x32" alt=""></td>
          <td><a href='#'>link 2</a></td>
          <td>text 3</td>
          <td>text 4</td>
        </tr>
      </tbody>
    </table>

    <script>
      window.addEventListener('DOMContentLoaded', function() {
        var input = document.querySelector('#search'),
          table = document.querySelector('.table'),
          td = table.querySelectorAll('tr:nth-child(n+1) td:nth-child(-n+3)');
        input.addEventListener('input', function() {
          var val = this.value,
            reg = new RegExp("(" + val + ")", "gi");
          [].forEach.call(document.querySelectorAll('span.hot'), function(el) {
            el.parentNode.replaceChild(document.createTextNode(el.textContent), el)
          });
          val && [].forEach.call(td, function(el) {
            el.innerHTML = el.textContent.replace(reg, "<span class='hot'>$1</span>")
          });
        });
      });

    </script>
  </body>

</html>

Скрипт работает, но не могу понять, почему при поиске пропадают изображения и ссылки превращаются в простой текст.
Поиск осуществляется по 2 и 3 столбцам

Цитата:

Сообщение от madeas

почему при поиске пропадают изображения и ссылки превращаются в простой текст

Ты "смешиваешь" innerHTML и textContent...
Т.о. просто убиваешь свою первоначальную разметку.

Цитата:

Сообщение от madeas

Скрипт работает

Смело сказано! :lol:

Я так и не понял, по каким элементам должен проходить поиск?

ksa,
Поиск осуществляется по 2 и 3 столбцам и не должен распространяться на 1 и 4

madeas,

td = table.querySelectorAll('tbody td:nth-child(2),tbody  td:nth-child(3)');

работает, но при замене textContent на innerHTML скрипт просто "раскрывает" ссылку на html тег

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <style>
      #search {
        min-height: 2rem;
        padding-right: 1rem;
        padding-left: 1rem;
        color: #212529 !important;
        border: 1px solid #f2f5f9;
        background-color: #fff;
      }

      span.hot {
        color: #18ad67;
      }

    </style>

    <p><input id="search" type="search" placeholder="Введите наименование или автора">
    </p>

    <table class='table'>
      <thead>
        <th>image</th>
        <th>links</th>
        <th>title</th>
        <th>title</th>
      </thead>
      <tbody>
        <tr>
          <td><img src="https://via.placeholder.com/32x32" alt=""></td>
          <td><a href='http://site.ru/link' title='link 2'>link 2</a></td>
          <td>text 3</td>
          <td>text 4</td>
        </tr>
        <tr>
          <td><img src="https://via.placeholder.com/32x32" alt=""></td>
          <td><a href='http://site.ru/link' title='link 2'>link 2</a></td>
          <td>text 3</td>
          <td>text 4</td>
        </tr>
        <tr>
          <td><img src="https://via.placeholder.com/32x32" alt=""></td>
          <td><a href='http://site.ru/link' title='link 2'>link 2</a></td>
          <td>text 3</td>
          <td>text 4</td>
        </tr>
      </tbody>
    </table>

    <script>
      window.addEventListener('DOMContentLoaded', function() {
        var input = document.querySelector('#search'),
          table = document.querySelector('.table'),
          td = table.querySelectorAll('tbody td:nth-child(2),tbody  td:nth-child(3)');
        input.addEventListener('input', function() {
          var val = this.value,
            reg = new RegExp("(" + val + ")", "gi");
          [].forEach.call(document.querySelectorAll('span.hot'), function(el) {
            el.parentNode.replaceChild(document.createTextNode(el.textContent), el)
          });
          val && [].forEach.call(td, function(el) {
            el.innerHTML = el.innerHTML.replace(reg, "<span class='hot'>$1</span>")
          });
        });
      });

    </script>
  </body>

</html>

madeas,
исправил

td = table.querySelectorAll('tbody td:nth-child(2) a,tbody  td:nth-child(3)');

madeas,
кроме строки td = ... менять остальное не нужно

рони,
сделал, спасибо.