Поиск подстроки

271

24 августа 2017, 22:51

Есть список внутри которого есть ссылки, необходимо по клику по блоку #block получить его значение и сравнить его со значениями которые есть в ссылках, если произошло совпадение показать скрытый блок js-special-message, иначе его спрятать

$('#block').on("click",function(event){ 
    event.preventDefault(); 
 
    var arrLink      = $("ul").find("a"), 
        arrCurCity	 = [], 
        checkWord 	 = $(this).find("div").text(); 
 
    $.each(arrLink, function(i, e){ 
        arrCurCity.push( $(e).text() ); 
    }) 
 
    altasib_geobase.sc_add_city(event); 
 
    $.each(arrCurCity, function(i, e){ 
        console.log(checkWord, e); 
        if(checkWord.match( new RegExp(e, 'i') ) ){ 
            $(".js-special-message").hide(); 
        } 
        if(!checkWord.match( new RegExp(e, 'i') ) ){ 
            $(".js-special-message").show(); 
            return false; 
        } 
    }) 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul> 
    <li><a href="">Пермь</a></li> 
    <li><a href="">Москва</a></li> 
    <li><a href="">Санкт-Петербург</a></li> 
    <li><a href="">Брянск</a></li> 
    <li><a href="">Тула</a></li> 
    <li><a href="">Калуга</a></li> 
    <li><a href="">Смоленск</a></li> 
    <li><a href="">Орёл</a></li> 
    <li><a href="">Белгород</a></li> 
    <li><a href="">Воронеж</a></li> 
    <li><a href="">Курск</a></li> 
    <li><a href="">Рязань</a></li> 
    <li><a href="">Тамбов</a></li> 
    <li><a href="">Липецк</a></li> 
    <li><a href="">Иваново</a></li> 
    <li><a href="">Владимир</a></li> 
    <li><a href="">Ярославль</a></li> 
</ul> 
<div id="block">Липецкб Липецкая область</div>

Answer 1

$('#block').on("click",function(){ 
  const $this = $(this), 
    thisText = $this.text(), 
    $cityLink = $('ul a'); 
       
  $cityLink.each(function(){ 
    if(thisText === $(this).text()) { 
      $('#js-special-message').show(); 
    } else { 
      $('#js-special-message').hide(); 
    } 
  }); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul> 
    <li><a href="">Пермь</a></li> 
    <li><a href="">Москва</a></li> 
    <li><a href="">Санкт-Петербург</a></li> 
    <li><a href="">Брянск</a></li> 
    <li><a href="">Тула</a></li> 
    <li><a href="">Калуга</a></li> 
    <li><a href="">Смоленск</a></li> 
    <li><a href="">Орёл</a></li> 
    <li><a href="">Белгород</a></li> 
    <li><a href="">Воронеж</a></li> 
    <li><a href="">Курск</a></li> 
    <li><a href="">Рязань</a></li> 
    <li><a href="">Тамбов</a></li> 
    <li><a href="">Липецк</a></li> 
    <li><a href="">Иваново</a></li> 
    <li><a href="">Владимир</a></li> 
    <li><a href="">Ярославль</a></li> 
</ul> 
<div id="block">Липецкб Липецкая область</div> 
<div id="js-special-message"></div>

Answer 2

Возможно такое решение подойдёт https://jsbin.com/fivihirato/edit?html,css,js,output

html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ul>
        <li><a href="">Пермь</a></li>
        <li><a href="">Москва</a></li>
        <li><a href="">Санкт-Петербург</a></li>
        <li><a href="">Брянск</a></li>
        <li><a href="">Тула</a></li>
        <li><a href="">Калуга</a></li>
        <li><a href="">Смоленск</a></li>
        <li><a href="">Орёл</a></li>
        <li><a href="">Белгород</a></li>
        <li><a href="">Воронеж</a></li>
        <li><a href="">Курск</a></li>
        <li><a href="">Рязань</a></li>
        <li><a href="">Тамбов</a></li>
        <li><a href="">Липецк</a></li>
        <li><a href="">Иваново</a></li>
        <li><a href="">Владимир</a></li>
        <li><a href="">Ярославль</a></li>
    </ul>
    <div id="block">Липецкб Липецкая область</div>
    <div id="js-special-message">Супер-сообщение</div>

css:

#js-special-message{
  display: none;
}
#block{
  cursor: pointer;
}

js:

var $message = $('#js-special-message');
$('#block').on('click', function(e){
    //из объекта события извлекаем текст из элемента 
    //на котором возникло событие (target), то есть из блока
    var text = e.target.innerText;
    //проходим по элементам списка
    $('ul li').each(function(index, elem){
      //извлекаем текст из элемента списка
      var linkText = elem.innerText;
      //на его основе формируем регулярку c флагом 'i'
      //для проверки без учёта регистра
      var re = new RegExp(linkText, 'i');
        //сопоставляем текст из блока с регуляркой
        if(text.match(re)){
            //если сопоставление сработало:
            //показываем сообщение и покидаем цикл с помощью return false
            $message.show();
            return false;
        } else {
            //иначе скрываем сообщение
            $message.hide();
        }
    });
});