How to use javascript to clear the heightline of the previous keyword when searching for keywords?

Question

I use javascript to make a search keyword, and the function of hightline text will be displayed for specific keywords, but there is a problem now, I hope that when searching for the next keyword, the previous hightlined text can be restored to the original black color, instead of the previous searched keyword being marked in red when searching for the next keyword? what should I do with this code? What can be done to optimize this problem. Thank you all for your answers.

 let search = document.querySelector('#js-search'); let content = document.querySelector('p'); let key = document.querySelector('#keyWord').value; function highlight(content, key){ return content.replace(new RegExp(key,'gi'),(match)=>{ return `<span style="color:red">${match}</span>`; }); } search.addEventListener('click',() =>{ const keyword = $('#keyWord').val(); const matchs = $("p:contains("+ keyword +")"); matchs.each(function(){ const content = $(this).html(); $(this).html(highlight(content,keyword)); }); });

 .red{ color:red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="keyWord" type="text"><button id="js-search">search</button> <ul> <li> <h1>eturn problem</h1> <p>I am an example of related content</p> </li> <li> <h1>credit card problem</h1> <p>This is about credit card issues, you can search for keywords to find keywords</p> </li> <li> <h1>order cancellation problem</h1> <p>order cancellation problemThis is a sample text of random typing content</p> </li> </ul>

Answer 1

You should store the initial HTML content and then reset it every time the search button is clicked.

 let search = document.querySelector('#js-search'); let content = document.querySelector('p'); let key = document.querySelector('#keyWord').value; let html = document.querySelector('.container').innerHTML; function resetHighlight() { document.querySelector('.container').innerHTML = html; } function highlight(content, key){ return content.replace(new RegExp(key,'gi'),(match)=>{ return `<span style="color:red">${match}</span>`; }); } search.addEventListener('click',() =>{ resetHighlight(); const keyword = $('#keyWord').val(); const matchs = $("p:contains("+ keyword +")"); matchs.each(function(){ const content = $(this).html(); $(this).html(highlight(content,keyword)); }); });

 .red{ color:red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="keyWord" type="text"><button id="js-search">search</button> <ul class="container"> <li> <h1>eturn problem</h1> <p>I am an example of related content</p> </li> <li> <h1>credit card problem</h1> <p>This is about credit card issues, you can search for keywords to find keywords</p> </li> <li> <h1>order cancellation problem</h1> <p>order cancellation problemThis is a sample text of random typing content</p> </li> </ul>

Answer 2

You can select highlighted elements and remove the highlight from each.

Below I refactored the code to use classes instead of style attributes to simplify.

I then use element.replaceWith to replace the span with a regular text node.

 let search = document.querySelector('#js-search'); let content = document.querySelector('p'); let key = document.querySelector('#keyWord').value; function resetHighlight() { const highlightedElements = document.querySelectorAll('.highlighted') for (let element of highlightedElements) { const textNode = new Text(element.textContent); element.replaceWith(textNode) } } function highlight(content, key){ return content.replace(new RegExp(key,'gi'),(match)=>{ return `<span class="highlighted">${match}</span>`; }); } search.addEventListener('click',() =>{ resetHighlight(); const keyword = $('#keyWord').val(); const matchs = $("p:contains("+ keyword +")"); matchs.each(function(){ const content = $(this).html(); $(this).html(highlight(content,keyword)); }); });

 .highlighted{ color:red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="keyWord" type="text"><button id="js-search">search</button> <ul> <li> <h1>eturn problem</h1> <p>I am an example of related content</p> </li> <li> <h1>credit card problem</h1> <p>This is about credit card issues, you can search for keywords to find keywords</p> </li> <li> <h1>order cancellation problem</h1> <p>order cancellation problemThis is a sample text of random typing content</p> </li> </ul>