рони, если поискать «с», то находит вторую «с» в слове спасибо. Также всё ломается на специальных символах и в случае, если ввести HTML-код...
Я думаю, что таких проблем можно избежать, экранировав специальные символы в рег. выр.-ний, и вставлять текст на страницу именно как текст!
<!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;
const parts = search.value.trim().split(/\s+/);
const pattern = new RegExp(parts.map(RegExp.escape).join("|"), "gi");
let match, index = 0;
result.textContent = "";
if(parts[0].length > 0) while(match = pattern.exec(value))
result.append(
value.slice(index, index = match.index),
mark(value.slice(index, index = pattern.lastIndex))
);
result.append(value.slice(index));
});
search.dispatchEvent(new Event("input"));
</script>
</body>
</html>