Adrikks,
<!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; let parts = search.value.trim(); const length = parts.length; if(!value || !length) {result.textContent = text.value; return}; parts = parts.split(/\s+/).map(pattern => new RegExp("(" +RegExp.escape(pattern) +")", "i")); result.textContent = ""; let temp = []; for (let i = 0; i < value.length; ) { let k = i, arrFindIndex = []; let found = parts.every(reg => { reg.lastIndex = 0; let match = reg.exec(value.slice(k)); if(match) { k += match.index arrFindIndex.push(k, k += match[0].length); return true } return false; }); if(found) {i = k; temp.push(...arrFindIndex)} else i++; } let index = 0; for (let i = 0; i < temp.length; i += 2){ result.append( value.slice(index, index = temp[i]), mark(value.slice(index, index = temp[i + 1])) ); } result.append(value.slice(index)); }); search.dispatchEvent(new Event("input")); </script> </body> </html> |
рони,
спасибо большое за помощь и за терпение. |
рони,
решаю подобную задачу. Можете объяснить, что вы делаете здесь? RegExp.escape = s => s.replace(/[[\\^$.|?*+()]/gim, "\\$&"); и здесь let found = parts.every(reg => { reg.lastIndex = 0; let match = reg.exec(value.slice(k)); if(match) { k += match.index arrFindIndex.push(k, k += match[0].length); return true } return false; }); if(found) {i = k; temp.push(...arrFindIndex)} else i++; } let index = 0; for (let i = 0; i < temp.length; i += 2){ result.append( value.slice(index, index = temp[i]), mark(value.slice(index, index = temp[i + 1])) ); } result.append(value.slice(index)); (комментарии возможно), если не трудно. Относительно недавно начала изучать JavaScript. |
JoenRules,
RegExp.escape экранирование служебных символов https://learn.javascript.ru/regexp-escaping . это любой символ в RegExp \. это просто точка если в строке поиска есть точка, нужно "уточнить" (экранировать) что это именно точка. подробнее по ссылке. let found = parts.every(reg => { // parts -> массив всех совпадений // every -> каждое совпадение должно быть в проверяемой строке reg.lastIndex = 0; //искать с начала строки let match = reg.exec(value.slice(k));//проверка совпадения if(match) {//если совпадение есть k += match.index arrFindIndex.push(k, k += match[0].length); //запоминаем совпадение с такого символа по такой return true // продолжаем поиск } return false;// прекращаем поиск если хотябы одного совпадения нет }); if(found) {i = k; temp.push(...arrFindIndex)} //если поиск был удачный сокращаем строку на длину совпадений // и сохраняем все сопадения else i++; //иначе сокращаем строку на один символ // продолжаем поиск по строке пока есть длина строки } let index = 0;//вывод результата с начала строки for (let i = 0; i < temp.length; i += 2){// цикл по участкам совпадения result.append( value.slice(index, index = temp[i]), // вывод строки до совпадения mark(value.slice(index, index = temp[i + 1]))// вывод элемента mark с текстом совпадения ); } result.append(value.slice(index)); //вывод последнего участка строки |
Часовой пояс GMT +3, время: 13:08. |