@Grayni
интерес к Web: html, css, js.

Почему переменная за пределами обработчика события keyup проверяется через раз?

Есть форма для ввода ссылки. В режиме реального времени проверяем, что пользователь начал писать ссылку с http:// или https://. Задал переменной hyper = RegExp и подставил в условие через test(), которое находится в функции обработчика keyup.
Для наглядности отдельный элемент будет менять цвет на зеленый если true и на красный - false.
Вопрос такой.
Если переменную объявить внутри функции обработчика, то все нормально. Т.е. когда мы ввели http://, то далее блок всегда зеленый, но мне нужна глобальная переменная, т.к. нужно эту же переменную подставить в другой обработчик и как то не красиво будет если ее множить.
А глобальная начинает "мигать", когда мы ввели http:// и продолжили ввод. Поясните это поведение и посоветуйте как вывернуть так, чтобы нормально отрабатывало с глобальной переменной.

Посмотреть здесь.

<div class="card-body">
  <form action="">
  <input tyle='text' id='long-link' name="link">
  </form>
</div>

var long = $('#long-link'), hyper = new RegExp ('^https://|^http://','g');
  long.keyup(function(){
    if (hyper.test(long.val()))  {
      $('.card-body').css({'background':'#4cfa76'});
    }
    else $('.card-body').css({'background':'#af1d1d'});
  });
  • Вопрос задан
  • 182 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Поясните это поведение

Вы объявили регулярное выражение с модификатором g - то есть, ищутся все совпадения с шаблоном, а не только первое. Вы вызываете метод test - совпадение найдено, круто. Вызываете снова - поиск начинается не с начала, а с того места, где он был окончен в прошлый раз. Разумеется, в этот раз ничего не найдено. Вызываете test в третий раз - снова всё хорошо, потому что в прошлый раз совпадения кончились, поиск снова выполняется с начала строки.

посоветуйте как вывернуть так, чтобы нормально отрабатывало

1. Уберите модификатор g.

2. После каждого вызова test вручную переустанавливайте позицию, с которой надо начинать поиск совпадения с шаблоном: hyper.lastIndex = 0;. Разумеется, этот вариант является говнокодом.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы