Question

我正在尝试创建一个突出显示来自不同div的单词的搜索框，现在我希望在单词突出显示后，只显示那些具有该单词的div，其余的div应该隐藏。这些词语正在突出显示，但我无法找到关于div的方法。

$(function() {
  $("input").on("input.highlight", function() {
    // Determine specified search term
    var searchTerm = $(this).val();
    // Highlight search term inside a specific context
    $(".cd-item").unmark().mark(searchTerm);
  }).trigger("input.highlight").focus();
});

    mark {
      background: orange;
      color: black;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="cd-main">
  <header>
    <h1>Want to share anything?!</h1>
  </header>
  <center><form action="/blog/search" method="get">
  <input type="text" name="search" placeholder="Search.." id="search" value="{{search}}">
    <button type="submit">search</button>
  </form></center>
  <br>
  <ul class="cd-gallery">
    {% for post in posts %}
    <li class="cd-item">
      <a href="/blog/ekblog/{{post.key().id()}}">
        <div>
          <h2>Category</h2>
          <p>{{post.subject}}</p>
          <b>View More</b>
        </div>
      </a>
    </li>
{% endfor %}
  </ul> <!-- .cd-gallery -->
</main> <!-- .cd-main -->

Answer 1

我的想法：

对于突出显示Word ：

为每个div获取.html()（假设他们有相同的className ='需要突出显示'）
然后使用Regex将关键字替换为keyword。 在正则表达式下面只是一个演示，它并不完美。。因为它没有考虑像子元素有属性的一些例外，属性包含关键字，你需要自己定制它。
在下面的代码中，我只是简单地比较oldHtml==newHtml，如果真的，隐藏div，如果为false，则替换为新的Html。更好的解决方案应该是使用regex.match()检查匹配计数是否＆gt; 0

重置突出显示：

与Highlight word类似，使用正则表达式匹配()+keyword()+，然后将其替换为关键字。（提示：多次点击Highlight Word时，上述功能会导致关键字多次被Highlight Word包裹，因此请使用()+删除所有内容。

function hgihtwords(keyword){
  $('.need-to-highlight').each(function(index, elem){
    let oldHtml = $(elem).html()
    //console.log(oldHtml.match(new RegExp('(<[a-z1-9]+>.*?)('+keyword+')(.*?<\/[a-z1-9]+>)', 'ig')))
    let newHtml = oldHtml.replace(new RegExp('(<[a-z1-9]+>.*?)('+keyword+')(.*?<\/[a-z1-9]+>)', 'ig'), '$1<span class="mark">$2</span>$3')
    if(oldHtml == newHtml){
      $(elem).hide()
    }
    else{
      $(elem).show().html( newHtml)
    }
    
  })
}

function resetHighlight(){
  $('.need-to-highlight').each(function(index, elem){
    let oldHtml = $(elem).html()
    let newHtml = oldHtml.replace(new RegExp('(<span class="mark">)+(.*?)(</span>)+', 'ig'), '$2')
    $(elem).show().html( newHtml)
  });
}

function showAll(){
  $('.need-to-highlight').show()
}

.mark {
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search"/>
<button onclick="hgihtwords($('#search').val())">Highlight Words</button>
<button onclick="resetHighlight()">Reset Highlight</button>
<button onclick="showAll()">Show All</button>

<div class="need-to-highlight">
  <h2>A Header Test 1</h2>
  <p>A Description Test 1</p>
  <b>A View More Test 2</b>
</div>
<div class="need-to-highlight">
  <h2>B Header Tes1t1</h2>
  <p>B Description Te1st 1</p>
  <b>B View More Te1st 2</b>
</div>

突出显示单词和div的搜索框

1 个答案: