Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   как выделять последовательности искомых подстрок? (https://javascript.ru/forum/events/79074-kak-vydelyat-posledovatelnosti-iskomykh-podstrok.html)

Adrikks 13.12.2019 16:21

как выделять последовательности искомых подстрок?
 
Подскажите, как выделять последовательности искомых подстрок?
Исходная строка: <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() {
   //подскажите, как это можно сделать
   }

рони 13.12.2019 17:27

поиск последовательности слов
 
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>

Adrikks 13.12.2019 17:46

рони,
а как совместить, чтобы не только с начала строки искались последовательности, а допустим в исходной строке будет "спасибо" и при искомой "си" выделило бы их в результирующей строчке?

рони 13.12.2019 18:01

Цитата:

Сообщение от Adrikks
с начала строки искались последовательности

ищется любая последовательность начала слов в строке, а не только сначала строки.
Цитата:

Сообщение от Adrikks
а как совместить,

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

примеры что на входе, что на выходе.

Adrikks 13.12.2019 18:06

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

рони 13.12.2019 18:14

Adrikks,
пишите текстом, а не картинкой. :)

рони 13.12.2019 18:16

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>

Adrikks 13.12.2019 18:17

рони,
Вот не знаю как правильно объяснить, как именно должно работать)
Поэтому показываю на примере картинки, каким должен быть результат)

рони 13.12.2019 18:19

Adrikks,
пример выше, смотрите.

Adrikks 13.12.2019 18:21

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


Часовой пояс GMT +3, время: 20:56.