css 如何使用javascript在搜索关键词时清除前一个关键词的heightline?

g2ieeal7  于 2023-01-06  发布在  Java
关注(0)|答案(2)|浏览(135)

我用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>
plicqrtu

plicqrtu1#

您应该存储初始HTML内容,然后在每次单击搜索按钮时重置它。

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>
1qczuiv0

1qczuiv02#

可以选择高亮显示的图元并从每个图元中删除高亮显示。
下面我重构了代码,使用类而不是样式属性来简化。
然后使用element.replaceWithspan替换为常规文本节点。

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>

相关问题