13.12.2019, 17:21
|
|
Интересующийся
|
|
Регистрация: 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.
|
|
13.12.2019, 18:27
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
|
поиск последовательности слов
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>
|
|
13.12.2019, 18:46
|
|
Интересующийся
|
|
Регистрация: 13.12.2019
Сообщений: 14
|
|
|
рони,
а как совместить, чтобы не только с начала строки искались последовательности, а допустим в исходной строке будет "спасибо" и при искомой "си" выделило бы их в результирующей строчке?
|
|
13.12.2019, 19:01
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
|
Сообщение от Adrikks
|
|
с начала строки искались последовательности
|
ищется любая последовательность начала слов в строке, а не только сначала строки.
|
Сообщение от Adrikks
|
|
а как совместить,
|
критерий поиска размыт, нужно определить конкретно что искать и где, иначе можно менять условия бесконечно.
примеры что на входе, что на выходе. |
|
13.12.2019, 19:06
|
|
Интересующийся
|
|
Регистрация: 13.12.2019
Сообщений: 14
|
|
|
рони,
Понимаю. Попробую уточнить.
Последний раз редактировалось Adrikks, 13.12.2019 в 19:21.
|
|
13.12.2019, 19:14
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
Adrikks,
пишите текстом, а не картинкой. 
|
|
13.12.2019, 19:16
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
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>
|
|
13.12.2019, 19:17
|
|
Интересующийся
|
|
Регистрация: 13.12.2019
Сообщений: 14
|
|
|
рони,
Вот не знаю как правильно объяснить, как именно должно работать)
Поэтому показываю на примере картинки, каким должен быть результат)
|
|
13.12.2019, 19:19
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
|
Adrikks,
пример выше, смотрите.
|
|
13.12.2019, 19:21
|
|
Интересующийся
|
|
Регистрация: 13.12.2019
Сообщений: 14
|
|
рони,
Да, думаю это именно то, что мне нужно было)
Спасибо за ваше время
|
|
|
|
