我用javascript做了一个搜索关键词,对于特定的关键词会显示hightline文本的功能,但是现在出现了一个问题!希望在搜索下一个关键词的时候,之前的hightline文本能够恢复到原来的黑色,而不是在搜索下一个关键词的时候,之前搜索到的关键词被标成红色,我应该怎么处理这段代码?2怎样做才能优化这个问题?3谢谢大家的回答。
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>
2条答案
按热度按时间plicqrtu1#
您应该存储初始HTML内容,然后在每次单击搜索按钮时重置它。
1qczuiv02#
可以选择高亮显示的图元并从每个图元中删除高亮显示。
下面我重构了代码,使用类而不是样式属性来简化。
然后使用
element.replaceWith
将span
替换为常规文本节点。