Всем привет.
Подскажите, как отладить скрипт?
<!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 столбцам
