рони, если поискать «с», то находит вторую «с» в слове спасибо. Также всё ломается на специальных символах и в случае, если ввести 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> |
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 слова с таким содержанием в этой же строке, выделить снова так же Цитата:
|
Цитата:
Я показал, как экранировать сп. символы, и как вставить текст на страницу! Цитата:
|
Цитата:
но как расширение перечитал ещё раз, не знаю о чём вы пишите. |
ещё вариант поиска, при условии пробел - слово - пробел ...
<!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> |
Цитата:
Например, возьмите в качестве исходного текста такой — Код:
ГАЗИЗЬЯНОВИЧ рулит — главный врач Метки: <врач>, <the-best> Код:
А вы знали, что элемент <mark> используется для подсветки найденного текста? Код:
<div style="position:fixed;top:0;left:0;width:100%;height:100%;background:white;">Dicks, Pussies and Assholes</div> |
Malleys,
ок подумаю. |
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> Цитата:
|
рони,
можете подсказать, вот в вашем решении как сделать при этом , чтобы выделялись последовательности и через слова Наверное, другими словами, выделять последовательности во всем тексте Пример: в этой ситуации должны выделиться и ГЛавный сан ВРач |
Adrikks,
а нельзя без картинок? скопируйте строки и выделите нужные совпадения исходная строка главный врач 12345 главный врач искомые совпадения гл вр главный врач 12345 главный врач :-? |
Часовой пояс GMT +3, время: 20:29. |