Подсветка части текста внутри html тега
Как лучше реализовать подсветку букв внутри тега, при посимвольном совпадении с вводимый в input текстом ? При том что нужно чтобы теги и классы не пострадали. При ввроде текста в поле input совпадающие с ним буквы из списка должны окрашиваться в другой цвет
const inputText = document.querySelector('#text'),
searchListItems = document.querySelectorAll('#search-list a');
inputText.addEventListener('input', function(e) {
searchListItems.forEach((el) => {
if (el.textContent.indexOf(inputText.value.toLowerCase()) !== -1) {
console.log('coincidence')
}
})
}).file{display:block;position:relative;padding:0 0 0 10px}
.file::before{content:'';display:block;width:10px;height:10px;position:absolute;top:50%;left:-20px;transform:translate(0,-50%)}
.file.text::before{background:coral}
.file.video::before{background:steelblue}<input type="text" id="text">
<ul id="search-list">
<li><a href="#" class="file text">point 1</a></li>
<li><a href="#" class="file text">pointer 2</a></li>
<li><a href="#" class="file video">points 3</a></li>
<li><a href="#" class="file video">point 4</a></li>
<li><a href="#" class="file video">point 5</a></li>
</ul>