13.12.2019, 22:01
|
 |
Профессор
|
|
Регистрация: 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>
|
|
13.12.2019, 22:27
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
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.12.2019, 22:34
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от рони
|
|
4 слова последовательно содержащие, 1 слово си, 2 слово з и т.д. если будут ещё 4 слова с таким содержанием в этой же строке, выделить снова так же
|
Да, вы можете использовать рег. выр. из своего примера.
Я показал, как экранировать сп. символы, и как вставить текст на страницу!
|
Сообщение от рони
|
|
это не понимаю.
|
Ну если вставлять текст на страницу через innerHTML, то текст, который содержит разметку, применяется на странице... Я думаю, что если исходный текст содержал разметку, то вы хотите и в результате увидеть именно исходный текст (но с нужным выделением), а не применённую разметку. |
|
13.12.2019, 22:53
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от Malleys
|
|
Ну если вставлять текст на страницу через innerHTML, то текст, который содержит разметку, применяется на странице... Я думаю, что если исходный текст содержал разметку, то вы хотите и в результате увидеть именно исходный текст (но с нужным выделением), а не применённую разметку.
|
инпут не может содержать разметку, или я чего не знаю.
но как расширение
перечитал ещё раз, не знаю о чём вы пишите. |
|
13.12.2019, 23:21
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
ещё вариант поиска, при условии пробел - слово - пробел ...
<!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 в 23:55.
|
|
13.12.2019, 23:47
|
|
Профессор
|
|
Регистрация: 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> |
|
|
14.12.2019, 00:03
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Malleys,
ок подумаю.
|
|
14.12.2019, 00:27
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
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
|
|
Да, вы можете использовать рег. выр. из своего примера.
|
не знаю как
Последний раз редактировалось рони, 14.12.2019 в 00:34.
|
|
15.12.2019, 18:03
|
|
Интересующийся
|
|
Регистрация: 13.12.2019
Сообщений: 14
|
|
рони,
можете подсказать, вот в вашем решении как сделать при этом , чтобы выделялись последовательности и через слова
Наверное, другими словами, выделять последовательности во всем тексте
Пример:
в этой ситуации должны выделиться и ГЛавный сан ВРач
|
|
15.12.2019, 18:23
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
Adrikks,
а нельзя без картинок?
скопируйте строки и выделите нужные совпадения
исходная строка
главный врач 12345 главный врач
искомые совпадения
гл вр
главный врач 12345 главный врач
|
|
|
|
