Скрыть блок, если есть слово в тексте

Question

Есть набор span и у каждого свой текст в атрибуте. Я хочу скрывать все span у которого нет написанного в input слова. Например, скрыть всё кроме хэтчбек. Можно ли как-то отбирать span 1) неточным поиском(как like в php), 2)без учета регистра

$('button').on('click', function() {
  var name = $('input').val();
  if (name !== '') {
    $('span[data-name!=' + name + ']').hide();
  } else {
    $('span').show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span data-name="Audi 100">Audi 100</span><br/>
<span data-name="Audi 100 седан">Audi 100 седан</span><br/>
<span data-name="BMW">BMW</span><br/>
<span data-name="Alfa Romeo 147 хэтчбек">Alfa Romeo 147 хэтчбек</span><br/>
<span data-name="Alfa Romeo хэтчбек">Alfa Romeo хэтчбек</span><br/>

<input value="хэтчбек" />
<button>Скрыть все, кроме слова хэтчбек</button>

Answer 1

$('button').on('click', function() {
  let name = $('input').val().toLowerCase();
  $('span').hide();
  
  $('span').each(function() {
      let dataName = $(this).data().name.toLowerCase();
      
      if (dataName.includes(name))
          $(this).show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span data-name="Audi 100">Audi 100</span><br/>
<span data-name="Audi 100 седан">Audi 100 седан</span><br/>
<span data-name="BMW">BMW</span><br/>
<span data-name="Alfa Romeo 147 хэтчбек">Alfa Romeo 147 хэтчбек</span><br/>
<span data-name="Alfa Romeo хэтчбек">Alfa Romeo хэтчбек</span><br/>

<input value="хэтчбек" />
<button>Скрыть все, кроме слова хэтчбек</button>

Answer 2

Во первых мы можете "инвертировать" свой код - вначале скрыть все, потом показать нужные:

$('button').on('click', function() {
  var name = $('input').val();
  if (name !== '') {
    $('span').hide();
    $('span[data-name*=' + name + ']').show();
  }
});

Во-вторых можно использовать :not():

$('button').on('click', function () {
  var name = $('input').val();
  if (name !== '') {
    $('span:not([data-name*=' + name + '])').hide();
  } else {
    $('span').show();
  }
});

БЛОГ НА HUSL

Скрыть блок, если есть слово в тексте

Ответы (2 шт):