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>