Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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>
Ответить с цитированием
  #12 (permalink)  
Старый 13.12.2019, 21:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,824

Malleys,
не вижу преимуществ, не понимаю логики выделения(на мой взгляд в вашем варианте выделяется больше чем нужно), экранизацию предлагал выше, если нужна будет необходимость.
и спасибо за превосходный код.
<input id="search" placeholder="Введите текст..." value="си з мир г">
<p id="result">спа<mark>си</mark>бо <mark>З</mark>АКИРОВ А<mark>МИР</mark><mark>З</mark>ЯН <mark>Г</mark>А<mark>З</mark>И<mark>З</mark>ЬЯНОВИЧ <mark>г</mark>лавный врач <mark>г</mark>лавный врач</p></body>

<p id="result">спа<mark>си</mark>бо <mark>З</mark>АКИРОВ А<mark>МИР</mark>ЗЯН <mark>Г</mark>АЗИЗЬЯНОВИЧ главный врач главный врач</p></body>

си з мир г
4 слова последовательно содержащие, 1 слово си, 2 слово з и т.д. если будут ещё 4 слова с таким содержанием в этой же строке, выделить снова так же
Сообщение от Malleys
вставлять текст на страницу именно как текст!
это не понимаю.
Ответить с цитированием
  #13 (permalink)  
Старый 13.12.2019, 21:34
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от рони
4 слова последовательно содержащие, 1 слово си, 2 слово з и т.д. если будут ещё 4 слова с таким содержанием в этой же строке, выделить снова так же
Да, вы можете использовать рег. выр. из своего примера.

Я показал, как экранировать сп. символы, и как вставить текст на страницу!

Сообщение от рони
это не понимаю.
Ну если вставлять текст на страницу через innerHTML, то текст, который содержит разметку, применяется на странице... Я думаю, что если исходный текст содержал разметку, то вы хотите и в результате увидеть именно исходный текст (но с нужным выделением), а не применённую разметку.
Ответить с цитированием
  #14 (permalink)  
Старый 13.12.2019, 21:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,824

Сообщение от Malleys
Ну если вставлять текст на страницу через innerHTML, то текст, который содержит разметку, применяется на странице... Я думаю, что если исходный текст содержал разметку, то вы хотите и в результате увидеть именно исходный текст (но с нужным выделением), а не применённую разметку.
инпут не может содержать разметку, или я чего не знаю.
но как расширение

перечитал ещё раз, не знаю о чём вы пишите.
Ответить с цитированием
  #15 (permalink)  
Старый 13.12.2019, 22:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,824

ещё вариант поиска, при условии пробел - слово - пробел ...
<!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, "\\$&");

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;
    for (let i = 0; i <= value.length - 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] = value[k + i].replace(new RegExp(RegExp.escape(pattern), "i"), "<mark>$&</mark>"));
            i += length - 1;
        }
    }

    result.innerHTML = value.join(" ");

});
search.dispatchEvent(new Event("input"));
</script>
</body>
</html>

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

Сообщение от рони
перечитал ещё раз, не знаю о чём вы пишите.
Судя по последнему примеру, вы действительно не видите возможности XSS и др. проблем.

Например, возьмите в качестве исходного текста такой —
Код:
ГАЗИЗЬЯНОВИЧ рулит — главный врач Метки: <врач>, <the-best>
или...
Код:
А вы знали, что элемент <mark> используется для подсветки найденного текста?
или...
Код:
<div style="position:fixed;top:0;left:0;width:100%;height:100%;background:white;">Dicks, Pussies and Assholes</div>
Ответить с цитированием
  #17 (permalink)  
Старый 13.12.2019, 23:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,824

Malleys,
ок подумаю.
Ответить с цитированием
  #18 (permalink)  
Старый 13.12.2019, 23:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,824

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
Да, вы можете использовать рег. выр. из своего примера.
не знаю как

Последний раз редактировалось рони, 13.12.2019 в 23:34.
Ответить с цитированием
  #19 (permalink)  
Старый 15.12.2019, 17:03
Интересующийся
Отправить личное сообщение для Adrikks Посмотреть профиль Найти все сообщения от Adrikks
 
Регистрация: 13.12.2019
Сообщений: 14

рони,
можете подсказать, вот в вашем решении как сделать при этом , чтобы выделялись последовательности и через слова
Наверное, другими словами, выделять последовательности во всем тексте
Пример:

в этой ситуации должны выделиться и ГЛавный сан ВРач
Ответить с цитированием
  #20 (permalink)  
Старый 15.12.2019, 17:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,824

Adrikks,
а нельзя без картинок?
скопируйте строки и выделите нужные совпадения
исходная строка
главный врач 12345 главный врач
искомые совпадения
гл вр
главный врач 12345 главный врач
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Открытие div блока при первом визите на сайт Nushaba Общие вопросы Javascript 28 20.12.2013 19:24
Как организовать RichEdit arma Элементы интерфейса 2 18.02.2010 13:57
О наследовании событий, или как корректно его отменить. JCShen Events/DOM/Window 8 08.02.2010 23:00
предложение по поводу последовательности уроков aldan8 Сайт Javascript.ru 12 10.09.2009 09:33
Как правильно послать XML в POST запросе LowCoder AJAX и COMET 10 15.07.2009 22:20