jQuery contains insensitive search for data from one list to another

Question

I have 2 "lists"

one is a tag list:

<span class="blog-tags minor-meta">
  <span>
    <a rel="tag">3d printing</a>
    <a rel="tag">art</a>
    <a rel="tag">medical</a>
    <a rel="tag">Prototyping</a>
  </span>
</span>

and another services list

<ul class="sp_sectors">
  <li>Engineering</li>
  <li>Automotive</li>
  <li>Medical</li>
  <li>Prototyping</li>
  <li>ART</li>
</ul>

I'm trying to SEARCH every tag in the tag list if it exists in the services list and add a "class = active" to it: for example, first tag "3d printing".. search through the "sp_sectors" list (not found = nothing happens, move to the second tag and search again, second tag is "art", now we search in the second list and we find art "

ART

".. but it's uppercase so I can't really "find" it..)

Here's the code I wrote to search through the list:

jQuery('.blog-tags > span > a').each(function() {

   var thi_tag = jQuery(this).html();

   jQuery('.sp_sectors li').each(function() {
      jQuery(".sp_sectors li:contains('" + thi_tag + "')").addClass('active');
   });

});

How can I do :contain insensitive in this case? Can someone help me please? Thanks

score 1 · Accepted Answer · answered Jan 11 '18 at 16:09

As you've seen, :contains is case-sensitive. One alternative is to build your own logic in to filter() which matches the text of the two elements using a case-insensitive regular expression. Also note that the inner each() loop is not required.

$('.blog-tags > span > a').each(function() {
  var aText = $(this).text();
  $('.sp_sectors li').filter(function() {
    return RegExp(aText, 'gi').test($(this).text());
  }).addClass('active');
});

.active { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="blog-tags minor-meta">
  <span>
    <a rel="tag">3d printing</a>
    <a rel="tag">art</a>
    <a rel="tag">medical</a>
    <a rel="tag">Prototyping</a>
  </span>
</span>

<ul class="sp_sectors">
  <li>Engineering</li>
  <li>Automotive</li>
  <li>Medical</li>
  <li>Prototyping</li>
  <li>ART</li>
</ul>

Yep, this is exactly what I needed. Thanks a lot – user3847953 Jan 11 '18 at 16:12 — user3847953, Jan 11 '18 at 16:12
No problem, glad to help – Rory McCrossan Jan 11 '18 at 16:13 — Rory McCrossan, Jan 11 '18 at 16:13

score 0 · Answer 2 · answered Jan 11 '18 at 16:26

I hope to solver your problem

jQuery('.blog-tags > span > a').each(function() {
   var searchText = $(this).text();
   jQuery('.sp_sectors').find( ":contains('" + searchText + "')" ).addClass('active');
});

.active { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="blog-tags minor-meta">
  <span>
    <a rel="tag">3d printing</a>
    <a rel="tag">art</a>
    <a rel="tag">medical</a>
    <a rel="tag">Prototyping</a>
  </span>
</span>

<ul class="sp_sectors">
  <li>Engineering</li>
  <li>Automotive</li>
  <li>Medical</li>
  <li>Prototyping</li>
  <li>ART</li>
</ul>

jQuery contains insensitive search for data from one list to another

2 Answers2