Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.12.2019, 17:21
Интересующийся
Отправить личное сообщение для Adrikks Посмотреть профиль Найти все сообщения от Adrikks
 
Регистрация: 13.12.2019
Сообщений: 14

как выделять последовательности искомых подстрок?
Подскажите, как выделять последовательности искомых подстрок?
Исходная строка: <br><input type="text" id="text" placeholder="Введите текст..."><br/><br/>
Искомые совпадения: <br><input type="text" name="search" id="search" placeholder="Введите текст...">
<p id="result"></p>

search.oninput = function() {
   //подскажите, как это можно сделать
   }

Последний раз редактировалось Adrikks, 13.12.2019 в 18:46.
Ответить с цитированием
  #2 (permalink)  
Старый 13.12.2019, 18:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,351

поиск последовательности слов
Adrikks,
при условии отсутствия служебных символов, иначе нужно добавить экранирование.
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    label{
        display: flex;
        flex-direction: column;
    }
    #result b{
        color: #FF0000;
    }

  </style>
</head>
<body>
<label>Исходная строка: <input type="text" id="text" placeholder="Введите текст..." value="ЗАКИРОВ АМИРЗЯН ГАЗИЗЬЯНОВИЧ"></label>
<label>Искомые совпадения: <input type="text" name="search" id="search" placeholder="Введите текст..." value="з а г"></label>
<p id="result"></p>
<script>
search.addEventListener('input', _=>{
    let txt = text.value, patern = search.value.trim();
    if(txt && patern) {
    let ar = patern.split(/\s+/);
    let reg = ar.map(_=> `(^|\\s+)(${_})(\\S*)`);
    patern = new RegExp(reg.join(''), 'i');
    txt = txt.replace(patern, a => ar.reduce((a,_, i) => {
    patern = new RegExp(reg[i], 'i');
    return a.replace(patern, '$1<b>$2</b>$3')
    }, a)
    )
    };
    result.innerHTML = txt;
})
//для теста
let event = new Event("input");
    search.dispatchEvent(event);

</script>

</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 13.12.2019, 18:46
Интересующийся
Отправить личное сообщение для Adrikks Посмотреть профиль Найти все сообщения от Adrikks
 
Регистрация: 13.12.2019
Сообщений: 14

рони,
а как совместить, чтобы не только с начала строки искались последовательности, а допустим в исходной строке будет "спасибо" и при искомой "си" выделило бы их в результирующей строчке?
Ответить с цитированием
  #4 (permalink)  
Старый 13.12.2019, 19:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,351

Сообщение от Adrikks
с начала строки искались последовательности
ищется любая последовательность начала слов в строке, а не только сначала строки.
Сообщение от Adrikks
а как совместить,
критерий поиска размыт, нужно определить конкретно что искать и где, иначе можно менять условия бесконечно.

примеры что на входе, что на выходе.
Ответить с цитированием
  #5 (permalink)  
Старый 13.12.2019, 19:06
Интересующийся
Отправить личное сообщение для Adrikks Посмотреть профиль Найти все сообщения от Adrikks
 
Регистрация: 13.12.2019
Сообщений: 14

рони,
Понимаю. Попробую уточнить.

Последний раз редактировалось Adrikks, 13.12.2019 в 19:21.
Ответить с цитированием
  #6 (permalink)  
Старый 13.12.2019, 19:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,351

Adrikks,
пишите текстом, а не картинкой.
Ответить с цитированием
  #7 (permalink)  
Старый 13.12.2019, 19:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,351

Adrikks,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    label{
        display: flex;
        flex-direction: column;
    }
    #result b{
        color: #FF0000;
    }

  </style>
</head>
<body>
<label>Исходная строка: <input type="text" id="text" placeholder="Введите текст..." value="спасибо ЗАКИРОВ АМИРЗЯН ГАЗИЗЬЯНОВИЧ главный врач главный врач"></label>
<label>Искомые совпадения: <input type="text" name="search" id="search" placeholder="Введите текст..." value="си з мир г"></label>
<p id="result"></p>
<script>
search.addEventListener('input', _=>{
    let txt = text.value, patern = search.value.trim();
    if(txt && patern) {
    let ar = patern.split(/\s+/);
    let reg = ar.map(_=> `(^\\S*|\\s+\\S*)(${_})(\\S*)`);
    patern = new RegExp(reg.join(''), 'ig');
    txt = txt.replace(patern, a => ar.reduce((a,_, i) => {
    patern = new RegExp(reg[i], 'i');
    return a.replace(patern, '$1<b>$2</b>$3')
    }, a)
    )
    };
    result.innerHTML = txt;
})
let event = new Event("input");
    search.dispatchEvent(event);

</script>

</body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 13.12.2019, 19:17
Интересующийся
Отправить личное сообщение для Adrikks Посмотреть профиль Найти все сообщения от Adrikks
 
Регистрация: 13.12.2019
Сообщений: 14

рони,
Вот не знаю как правильно объяснить, как именно должно работать)
Поэтому показываю на примере картинки, каким должен быть результат)
Ответить с цитированием
  #9 (permalink)  
Старый 13.12.2019, 19:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,351

Adrikks,
пример выше, смотрите.
Ответить с цитированием
  #10 (permalink)  
Старый 13.12.2019, 19:21
Интересующийся
Отправить личное сообщение для Adrikks Посмотреть профиль Найти все сообщения от Adrikks
 
Регистрация: 13.12.2019
Сообщений: 14

рони,
Да, думаю это именно то, что мне нужно было)
Спасибо за ваше время
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Открытие div блока при первом визите на сайт Nushaba Общие вопросы Javascript 28 20.12.2013 20:24
Как организовать RichEdit arma Элементы интерфейса 2 18.02.2010 14:57
О наследовании событий, или как корректно его отменить. JCShen Events/DOM/Window 8 09.02.2010 00:00
предложение по поводу последовательности уроков aldan8 Сайт Javascript.ru 12 10.09.2009 10:33
Как правильно послать XML в POST запросе LowCoder AJAX и COMET 10 15.07.2009 23:20