Malleys,
может есть иной способ, пока так
<!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="А вы знали, что элемент <mark> используется для подсветки найденного текста?">
</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.trim().split(/\s+/);
const parts = search.value.trim().split(/\s+/).map(s => s.toLowerCase());
const length = parts.length;
result.textContent = "";
for (let i = 0; i < value.length; i++) {
let found = value.slice(i, i + length).every((txt, k) => txt.toLowerCase().includes(parts[k]));
if(found) {
parts.forEach((pattern, k) => value[k + i].replace(new RegExp("(\\S*?)(" +RegExp.escape(pattern) +")(\\S*)", "i"), (a,b,c,d) => result.append(
b,
mark(c),
d,
" "
)));
i += length - 1;
}
else result.append(value[i], " ")
}
});
search.dispatchEvent(new Event("input"));
</script>
</body>
</html>
|
Сообщение от Malleys
|
|
Да, вы можете использовать рег. выр. из своего примера.
|
не знаю как