Показать сообщение отдельно
  #11 (permalink)  
Старый 13.12.2019, 21:01
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

рони, если поискать «с», то находит вторую «с» в слове спасибо. Также всё ломается на специальных символах и в случае, если ввести 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>
Ответить с цитированием