Ответы пользователя по тегу JavaScript
  • Как сделать так, чтобы можно было находить слово в тексте?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Заменять регулярным выражением вхождения поисковой подстроки на её же, обёрнутую в тег <span> который стилями сделает текст внутри него красным:

    Но, поскольку строка поиска становится регулярным выражением, можно в поиск ввести, например, [о-т] для поиска всех букв из диапазона: о, п, р, с, т.
    А простая точка выберет вообще весь текст. Поэтому хорошо бы в поисковой строке сначала экранировать все спец-символы из арсенала регулярных выражений.
    Ответ написан
    Комментировать
  • Как принять скобку в переменную из Textarea в jQuery / JavaScript?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    replace() так не работает: ('<test>').replace(['<', '>'], ''); // "<test>"

    Заменить угловые скобки можно так: content = content.replace(/[<>]/g, '');
    Это регулярное выражение / /, которое заменяет "глобально" (флаг g) во всей строке
    любой из симолов внутри квадратных скобок [ ] , на пустую строку ''.

    Уверены, что хотите в превью пропускать любые теги, включая script ? Это может быть небезопасно.

    Более разумная, может, идея – создать в теневой DOM узел с этим HTML, в нём удалить запретные теги через обычные querySelectorAll('script') и затем уцелевшее дерево вставить в элемент для предпросмотра.

    Другой вариант — вставить этот HTML в iFrame с максимально строгими запретами.
    Ответ написан
    1 комментарий
  • Как узнать сколько осталось до конца урока? Ссылаясь на текущее время?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Объекту Date назначить часы и минуты окончания урока. Секунды установить в ноль.
    Другой объект Date оставить как есть, на «сейчас».
    Объекты Date можно вычитать – получится разница между двумя датами в миллисекундах. Для секунд разделить на 1000.

    const secondsTill = timeString => {
      const [hours, minutes] = timeString.split(':');
      const now = new Date();
      const end = new Date();
      end.setHours(hours);
      end.setMinutes(minutes);
      end.setSeconds(0);
      return Math.floor((end - now) / 1000);
    }
    
    const endOfClass = '11:20';
    alert(`До конца урока в ${endOfClass} осталось ${secondsTill(endOfClass)} секунд`);
    Ответ написан
    9 комментариев
  • Заменить символ в DOM?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    нужно рекурсивно обойти дерево DOM по узлам Node:
    берём корневой узел и перебираем его дочерние узлы childNodes.
    Интересуют только текстовые: где node.nodeType === Node.TEXT_NODE
    в каждом с содержанием node.nodeValue работать как со строкой текста – заменить/убрать искомый символ.

    Если же попался не-текстовый узел, то рекурсия! – перебирать таким же образом его childNodes

    Ответ написан
    Комментировать
  • Как получить JSON с удалённого сервера с помощью Nashorn?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    k1r0srus, похоже, этот JS-движок Nashorn несколько неполноценный и урезанный, и в нём отсутствует поддержка запросов – поэтому придётся обращаться к Java-инструментам.
    Вот gist с примером.

    Пишут, что Nashorn устарел в JDK 11 и был исключён в JDK15.
    Ответ написан
    1 комментарий
  • Как в скрипте менять выводимый текст каждые 3 дня?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    const index = Math.floor(Date.now() / (3 * 864e5)) % 3; // 0, 1 или 2
    
    console.log( ['X', 'Y', 'Z'][index] );
    Первая тройка – получить число миллисекунд в трёх сутках.
    3 * 60 * 60 * 24 * 1000 = 3 * 86400000 = 3 * 864e5

    Вторая тройка – сколько элементов в массиве. Остаток от деления на их число даст индекс в массиве.
    как так
    for (let i = 0; i < 6; i++) {
      console.log( i % 3 );
    }
    // 0 1 2 0 1 2
    Ответ написан
    4 комментария
  • Как правильно выводить длину видео?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно начальный индекс вырезания подстроки менять, и часы забирать только когда длиннее часа:
    -    console.log(new Date(media.duration * 1000).toISOString().slice(11, 19));
    +    console.log(new Date(media.duration * 1000).toISOString().slice(media.duration > 3600 ? 11 : 14, 19));
    Ответ написан
    1 комментарий
  • Как можно реализовать такую 3Д анимацию?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Это, скорее, плоские фигуры. Массивы точек, расположение и искажение которых задаётся мат. формулами.
    Тут нет загораживания одной «сферой» другой: все точки видны, просто поверх друг друга рисуются. Нет «обратной стороны» Луны.

    Начните с поиска подходящей визуализации одной «сферы».

    В недеформированном виде, это, наверное, просто круг, заполненный точками «по мелким клеточкам».
    Точки, расстояние которых до центра не превышает порог R.

    Искажение такое плавное можно получить, используя шум Перлина. Он даст плавные псевдослучайные неповторяющиеся «волны». Для каждой точки сетки считать значение двумерного шума и сдвигать точку на эти значения (x, y). Получатся волны на тряпочке )
    Ответ написан
    Комментировать
  • Как открывать ссылки пакетами?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    В твиге сначала собрать все ссылки в один JS массив. Тогда в вопросе покажем реальное общее количество ссылок, а не хардкодед "100".

    Можно просто зарядить таймауты с пачками ссылок:
    function LINKNAME() {
      const urls = [];
      {% if products %}
        {% for product in products %}
          {% for actione in product.actione %}
            {% if actione.url %}
              urls.push('{{ actione.url }}');
            {% endif %}
          {% endfor %}
        {% endfor %}
      {% endif %}
    
      const isOkay = confirm(`Открыть ${urls.length} вкладок?`);
      if (!isOkay){
        alert('Сообщение при отмене');
        return;
      }
      // открываем
      const batchSize = 5; // по сколько за 1 раз одновременно открывать
      const pause = 3; // пауза в секундах между пачками
      let iteration = 0;
    
      while (urls.length) {
        const batch = urls.splice(0, batchSize);
        setTimeout(() => batch.forEach(url => window.open(url)), iteration * pause * 1000);
        iteration++;
      }
    }
    А то можно бы с генератором..
    Ответ написан
    1 комментарий
  • Как сделать так, чтобы когда урок начинался (наступало 8:00), то выводилось "Урок начался!", а когда заканчивался (8:40) - "Урок закончился!"?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Не очень удачно, что таймеры часто обновляют содержание страницы, по сути ничего не меняя – текст остаётся тот же большую часть срабатываний.

    Один вариант — использовать Shadow DOM, можно с React или Vue – те берут на себя задачу обновления реальной DOM только фактически изменившимися участками. Но освоение нового инструмента займёт какое-то время.

    Другой вариант – использовать события. Что-то меняется только когда впервые наступает момет «Че». Например, время 08:40. В этот момент можно выбросить событие. Считайте, что «Событие» == «Звонок».
    Слушать это событие будет каждый компонент урока. И менять своё состояние, если время – его.

    Как я понимаю, там ещё обычные часы должны тикать. Вот в них же можно отслеживать моменты, когда из 08:39 стало 08:40 – предыдущее значение ещё-не, а текущее уже-да. Вот тогда и выбрасывать событие.

    У компонента урока может быть одно из трёх состояний: "Upcoming", "Ongoing", "Completed". В обработчике события можно принимать решение, какое из трёх переключиться, исходя из времени события и собственных отметок времени начала и конца.
    Ответ написан
  • Как использовать тернарный оператор на групе кода?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Тернарный оператор — чтобы возвращать значение.
    Это не модная замена if .. else

    В вашем примере лучше записать традиционно:
    if (something) {
      console.log(0);
      console.log('something else');
    } else {
      console.log(false);
    }
    Ответ написан
    Комментировать
  • Как оптимизировать js код переключения контента?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Признаки, что в коде можно что-то улучшить:
    1. повторяется похожий код, с каждым разом меняется лишь что-то небольшое – может, заменить на цикл или функцю?
    2. повторяется текстовая строка, например, имя класса — в константу её


    Раз тут соблюдается некий принцип именования классов и id, можно отталкиваться от общего списка:
    в функции changeTo() повторяются одинаковые действия. Сможете выдвинуть их во внешнюю функцию?
    Ответ написан
    Комментировать
  • Как передать значения нескольких input в другую форму без кнопки send?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    слушать событие "input" на каждом из элементов: селекте и двух телефонных.
    По событию выполнять функцию, которая возьмёт значения всех трёх полей, сериализует их в JSON и положит в скрытый input.
    Ответ написан
    Комментировать
  • Как сделать так, чтобы когда наступало время 8:00, то выводилось "Урок начался!", а когда наступало 8:40 - "Урок закончился!"?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    1-й вариант: поймать однократное «событие» — предыдущее время было «не то», и вот сейчас стало «то» – тогда вывести что-то. Это можно ловить в таймере, который обновляет часы. И его стоит запускать чаще, чем раз в секунду, чтобы время точнее щелкало, иначе могут пропускаться отдельные секунды.

    2-й вариант, менее точный, т.к. таймеры в JavaScript могут здорово отклоняться от реального времени. В момент запуска вычислить, сколько там времени осталось до 08:00 и до 08:40, и зарядить два setTimeout() на нужные количества миллисекунд.
    Ответ написан
    Комментировать
  • Как узнать даты до определённого числа?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Объект Date в JavaScript умеет всё что нужно.
    Парсить дату:
    const D = new Date('2022-08-01'); // объект Date с указанной датой


    Добавлять дни:
    const D = new Date(); // сегодня, сейчас
    D.setDate( D.getDate() + 1 ); // завтра
    месяц, год – при надобности изменятся автомагически.
    Ответ написан
    1 комментарий
  • Как найти 3 одинаковых числа, идущих подряд в массиве js?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    для первой версии решения учебного задания можно и «на пальцах»:
    сравнивать с двумя предыдущими
    const has3 = arr => {
      for (let i = 2; i < arr.length; i++) {
        if (arr[i] === arr[i - 1] && arr[i] === arr[i - 2]) {
          return true;
        }
      }
      return false;
    }
    
    has3([1,2,3,3,4,5,5,5,6]) // true
    has3([1,2,3,3,4,5,5,6,6]) // false


    Подумайте, как можно сделать решение более универсальным, чтобы задавать параметром необходимое число идущих подряд, которое ищем.
    Ответ написан
    9 комментариев
  • Почему label + input не работает при динамическом добавлении?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    тут ошибка наиболее грубая, наверное:
    - translations['photo.select_a_photo_to_attach']
    + translations.photo.select_a_photo_to_attach


    И в дополнение:
    1. почему oProgressBar['total'] а не oProgressBar.total и другие подобные?
    2. откуда берется функция empty() ? Это не PHP.
    3. переменная codeInput не объявлена
    4. много строк с разметкой удобнее записать через обратные одиночные кавычки:
      const codeInput = `
        <div>
          строка 1 ${translations.photo.select_a_photo_to_attach} продолжение
          строка 2
        </div>
      `;

    Ответ написан
    1 комментарий
  • Как обнулять интервал при каждом новом вызове?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Если правильно понял, нужно, чтобы срабатывание любого таймера было эксклюзивным – оно отключало другие сработавшие до этого таймеры.
    Каждый следующий гасит предыдущие.

    let previousTimer;
    
    const startTimer = (word, delay, callback) => {
      const timer = setInterval(
        () => {
          if (previousTimer !== timer) {
            clearInterval(previousTimer);
            previousTimer = timer;
          }
          callback();
        },
        delay
      );
    };
    
    startTimer('t1', 280, () => console.log('cb t1'));
    startTimer('t2', 1200, () => console.log('cb t2'));
    startTimer('t3', 910, () => console.log('cb t3'));
    
    // t1, t1, t1, t3, t2, t2, t2...
    Ответ написан
    3 комментария
  • Почему не работает код в firefox?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Потому, что в хроме авторизованы, есть все куки. А в Фоксе – нет.
    И бэк возвращает вместо валидного JSON'а, какое-нибудь «вам надо зарегистрироваться».

    (дичайшее предположение моего хрустального шара, я не при чём)
    Ответ написан
    Комментировать
  • Как правильно вычленить номер из текста?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    (new RegExp(number.replace('+', '\\+'))).test(text)   // true
    Ответ написан
    6 комментариев