Adrikks,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
label {
display: flex;
flex-direction: column;
}
#result mark {
color: #FF0000;
}
</style>
</head>
<body>
<label>
Исходная строка:
<input id="text" placeholder="Введите текст..." value="АЛИЕВА БАЙНАТ АБДУРАХМАНОВНА">
</label>
<label>
Искомые совпадения:
<input id="search" placeholder="Введите текст..." value="а б">
</label>
<p id="result"></p>
<script>
RegExp.escape = s => s.replace(/[[\\^$.|?*+()]/gim, "\\$&");
function mark(string) {
const node = document.createElement("mark");
node.textContent = string;
return node;
}
search.addEventListener("input", () => {
const value = text.value;
let parts = search.value.trim();
const length = parts.length;
if(!value || !length) {result.textContent = text.value; return};
parts = parts.split(/\s+/).map(pattern => new RegExp("(" +RegExp.escape(pattern) +")", "i"));
result.textContent = "";
let temp = [];
for (let i = 0; i < value.length; ) {
let k = i, arrFindIndex = [];
let found = parts.every(reg => {
reg.lastIndex = 0;
let match = reg.exec(value.slice(k));
if(match) {
k += match.index
arrFindIndex.push(k, k += match[0].length);
return true
}
return false;
});
if(found) {i = k; temp.push(...arrFindIndex)}
else i++;
}
let index = 0;
for (let i = 0; i < temp.length; i += 2){
result.append(
value.slice(index, index = temp[i]),
mark(value.slice(index, index = temp[i + 1]))
);
}
result.append(value.slice(index));
});
search.dispatchEvent(new Event("input"));
</script>
</body>
</html>
|
рони,
спасибо большое за помощь и за терпение. |
рони,
решаю подобную задачу. Можете объяснить, что вы делаете здесь? RegExp.escape = s => s.replace(/[[\\^$.|?*+()]/gim, "\\$&"); и здесь
let found = parts.every(reg => {
reg.lastIndex = 0;
let match = reg.exec(value.slice(k));
if(match) {
k += match.index
arrFindIndex.push(k, k += match[0].length);
return true
}
return false;
});
if(found) {i = k; temp.push(...arrFindIndex)}
else i++;
}
let index = 0;
for (let i = 0; i < temp.length; i += 2){
result.append(
value.slice(index, index = temp[i]),
mark(value.slice(index, index = temp[i + 1]))
);
}
result.append(value.slice(index));
(комментарии возможно), если не трудно. Относительно недавно начала изучать JavaScript. |
JoenRules,
RegExp.escape экранирование служебных символов https://learn.javascript.ru/regexp-escaping . это любой символ в RegExp \. это просто точка если в строке поиска есть точка, нужно "уточнить" (экранировать) что это именно точка. подробнее по ссылке.
let found = parts.every(reg => { // parts -> массив всех совпадений
// every -> каждое совпадение должно быть в проверяемой строке
reg.lastIndex = 0; //искать с начала строки
let match = reg.exec(value.slice(k));//проверка совпадения
if(match) {//если совпадение есть
k += match.index
arrFindIndex.push(k, k += match[0].length); //запоминаем совпадение с такого символа по такой
return true // продолжаем поиск
}
return false;// прекращаем поиск если хотябы одного совпадения нет
});
if(found) {i = k; temp.push(...arrFindIndex)} //если поиск был удачный сокращаем строку на длину совпадений
// и сохраняем все сопадения
else i++; //иначе сокращаем строку на один символ
// продолжаем поиск по строке пока есть длина строки
}
let index = 0;//вывод результата с начала строки
for (let i = 0; i < temp.length; i += 2){// цикл по участкам совпадения
result.append(
value.slice(index, index = temp[i]), // вывод строки до совпадения
mark(value.slice(index, index = temp[i + 1]))// вывод элемента mark с текстом совпадения
);
}
result.append(value.slice(index)); //вывод последнего участка строки
|
| Часовой пояс GMT +3, время: 08:58. |