...
and, as you probably already guessed, when searching for any combination of characters that resemble a tag or its attributes, the entire HTML page was broken. <span style="background-color: yellow;">...найденное совпадение...</span>
<form> <input type="text" value="" placeholder="Search" autofocus> <input type="button" value=" " title="Отменить поиск"> <input type="submit" value=" " title="Начать поиск"> </form>
<form> <input class="place_for_search" type="text" id="text-to-find" value="" placeholder="Search" autofocus> <input class="button_for_turn_back" type="button" onclick="javascript: FindOnPage('text-to-find',false); return false;" value=" " title="Отменить поиск"> <input class="button_for_search" type="submit" onclick="javascript: FindOnPage('text-to-find',true); return false;" value=" " title="Начать поиск"> </form>
/>(.*?)</g
var input,search,pr,result,result_arr, locale_HTML, result_store; //input - принимаем текст, который ввел пользователь //search - делаем из строки регулярное выражение //pr - сохраняем в нее текущий <body></body> //result - выборка текста из pr (т.е. отсекаем теги и атрибуты) //result_arr - аналог pr, но со стилями для подсветки //locale_HTML - оригинал <body></body> который менять не будем, используем для обнуления стилей
var input,search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // сохраняем в переменную весь body (Исходный)
var input,search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // сохраняем в переменную весь body (Исходный) function FindOnPage(name, status) { if(status) { FindOnPageBack(); FindOnPageGo(); } //чистим прошлое и Выделяем найденное if(!status) { FindOnPageBack(); } //Снимаем выделение }
var input,search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // сохраняем в переменную весь body (Исходный) function FindOnPage(name, status) { input = document.getElementById(name).value; //получаем значение из поля в html if(input.length<3&&status==true) { alert('Для поиска вы должны ввести три или более символов'); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили } if(input.length>=3) { //выполняем поиск } function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили if(status) { FindOnPageBack(); FindOnPageGo(); } //чистим прошлое и Выделяем найденное if(!status) { FindOnPageBack(); } //Снимаем выделение }
var input,search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // сохраняем в переменную весь body (Исходный) function FindOnPage(name, status) { input = document.getElementById(name).value; //получаем значение из поля в html if(input.length<3&&status==true) { alert('Для поиска вы должны ввести три или более символов'); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили } if(input.length>=3) { function FindOnPageGo() { search = '/'+input+'/g'; //делаем из строки регуярное выражение pr = document.body.innerHTML; // сохраняем в переменную весь body result = pr.match(/>(.*?)</g); //отсекаем все теги и получаем только текст result_arr = []; //в этом массиве будем хранить результат работы (подсветку) } } function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили if(status) { FindOnPageBack(); FindOnPageGo(); } //чистим прошлое и Выделяем найденное if(!status) { FindOnPageBack(); } //Снимаем выделение }
var input,search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // сохраняем в переменную весь body (Исходный) function FindOnPage(name, status) { input = document.getElementById(name).value; //получаем значение из поля в html if(input.length<3&&status==true) { alert('Для поиска вы должны ввести три или более символов'); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили } if(input.length>=3) { function FindOnPageGo() { search = '/'+input+'/g'; //делаем из строки регуярное выражение pr = document.body.innerHTML; // сохраняем в переменную весь body result = pr.match(/>(.*?)</g); //отсекаем все теги и получаем только текст result_arr = []; //в этом массиве будем хранить результат работы (подсветку) for(var i=0; i<result.length;i++) { result_arr[i] = result[i].replace(eval(search), '<span style="background-color:yellow;">'+input+'</span>'); //находим нужные элементы, задаем стиль и сохраняем в новый массив } for(var i=0; i<result.length;i++) { pr=pr.replace(result[i],result_arr[i]) //заменяем в переменной с html текст на новый из новогом ассива } document.body.innerHTML = pr; //заменяем html код } } function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили if(status) { FindOnPageBack(); FindOnPageGo(); } //чистим прошлое и Выделяем найденное if(!status) { FindOnPageBack(); } //Снимаем выделение }
input = numer.replace(/^\s+/g,''); input = numer.replace(/[ ]{1,}/g,' ');
input = document.getElementById(name).value; //получаем значение из поля в html
var warning = true; for(var i=0;i<result.length;i++) { if(result[i].match(eval(search))!=null) { warning = false; } } if(warning == true) { alert('Не найдено ни одного совпадения'); }
<p> бла бла бла </p>
<p> бла бла бла </p>
Source: https://habr.com/ru/post/438382/