Обновленный ответ :
Сначала я не понял, что вы хотите вызвать веб-страницу, которой вы не контролируете, а затем использовать JavaScript в своем браузере для взаимодействия с ней.
Информация в первоначальном ответе ниже по-прежнему актуальна, но возникает вопрос: как заставить код работать в правильном контексте? И ответ: Есть как минимум два способа:
В любом приличном браузере в наши дни есть встроенные средства отладки. Посмотрите на меню для них, но во многих браузерах они доступны через клавишу F12 или Ctrl + Shift + I. В этих инструментах вы найдете "консоль", где вы можете ввести JavaScript и запустить его в контексте страницы, на которую вы смотрите.
Это отлично подходит для выполнения действий в интерактивном режиме, но это немного больно повторять его каждый раз. Вы также можете поместить код в локальный файл (например, /home/tjc/foo.js), а затем, когда вы перейдете на страницу, используйте консоль, чтобы добавить этот script на страницу (что приведет к ее выполнению в контексте страница), например:
Document.documentElement.appendChild(document.createElement("script")).src = "file:///home/tjc/foo.js";
Как только ваш script сделает то, что вы хотите, вы можете превратить его в bookmarklet . Это закладка браузера с использованием схемы javascript: , а не обычной http: и т.д. Подробнее см. Ссылку. Вам понадобится инструмент, который возьмет ваш код JavaScript и сделает для вас необходимую URL-кодировку, например Bookmarklet Crunchinator или аналогичный.
Оригинальный ответ :
Так что он найдет текст или получит элемент по id/class...
Это три очень разных вопроса:
Если вы хотите только найти текст, но не заботитесь о том, какой элемент содержит его, вы можете просто просмотреть innerHTML on document.body . innerHTML - строка; при доступе к нему браузер создает строку HTML для всех элементов DOM в элементе, на который вы его вызываете (и его потомках). Обратите внимание, что это не исходный контент с сервера; это создается "на лету" при доступе к элементу. Для многих случаев использования получение этой строки, а затем ее просмотр может быть полезным. Обратите внимание, что текст, который вы просматриваете, является разметкой, например, если вы искали слово "таблица", вы можете найти его в предложении ("Мы сели за стол") или в разметке (
...).
Здесь приведен пример подсчета слова I"m на странице с помощью innerHTML: живая копия
(function() { var pageText = document.body.innerHTML; display("Count of "I\"m" on the page: " + pageText.match(/I"m/g).length); function display(msg) { var p = document.createElement("p"); p.innerHTML = String(msg); document.body.appendChild(p); } })();
Если вам нужно выяснить, в каком именно элементе он находится, вам нужно будет написать рекурсивную функцию, проходящую через узлы страницы, и для Text , просматривает текст внутри. Вот базовый пример (функция - это функция walk): Живая копия | - см. примечание о примерах в конце.
(function() { var matches = , index; walk(matches, document.body, ""); function walk(matches, node, path) { var child; switch (node.nodeType) { case 1: // Element for (child = node.firstChild; child; child = child.nextSibling) { walk(matches, child, path + "/" + node.tagName); } break; case 3: // Text if (node.nodeValue.indexOf("I"m") !== -1) { matches.push("Found it at " + path); } break; } } display("Matches found (" + matches.length + "):"); for (index = 0; index < matches.length; ++index) { display(matches); } function display(msg) { var p = document.createElement("p"); p.innerHTML = String(msg); document.body.appendChild(p); } })();
Чтобы найти элемент на странице id , используйте
- jQuery
Пару дней назад получил тестовое задание от компании на вакансию Front-end dev. Конечно же, задание состояло из нескольких пунктов. Но сейчас речь пойдет только об одном из них - организация поиска по странице. Т.е. банальный поиск по введенному в поле тексту (аналог Ctrl+F в браузере). Особенность задания была в том, что использование каких-либо JS фреймворков или библиотек запрещено. Все писать на родном native JavaScript .
Поиск готового решения
Первая мысль: кто-то уже точно такое писал, надо нагуглить и скопипастить. Так я и сделал. За час я нашел два неплохих скрипта, которые по сути работали одинаково, но были написаны по-разному. Выбрал тот, в коде которого лучше разобрался и вставил к себе на старничку.Если кому интересно, код брал .
Скрипт сразу заработал. Я думал, что вопрос решен, но как оказалось, не в обиду автору скрипта, в нем был огромный недостаток. Скрипт вел поиск по всему содержимому тега... и, как вы уже наверное догадались, при поиске любого сочетания символов, которые напоминают тег или его атрибуты, ломалась вся страница HTML.
Почему скрипт работал некорректно?
Все просто. Скрипт работает следующим образом. Сперва в переменную записываем все содержимое тега body , затем ищем совпадения с регулярным выражением (задает пользователь при вводе в текстовое поле) и затем заменяем все совпадения на следующий код:...найденное совпадение...
А затем заменяем текущий тег body на новый полученный. Разметка обновляется, меняются стили и на экране подсвечиваются желтым все найденные результаты.Вы уже наверняка поняли, в чем проблема, но я все же объясню подробней. Представьте, что в поле поиска ввели слово «div» . Как вы понимаете, внутри body есть множество других тегов, в том числе и div . И если мы всем к «div» применим стили, указанные выше, то это уже будет не блок, а непонятно что, так как конструкция ломается. В итоге после перезаписи разметки мы получим полностью сломанную веб-страницу. Выглядит это так.
Как видите, страница полностью ломается. Короче говоря, скрипт оказался нерабочим, и я решил написать свой с нуля, чему и посвящается эта статья.
Итак пишем скрипт с нуля
Как все у меня выглядит.
Сейчас нас интересует форма с поиском. Обвел ее красной линией.
Давайте немного разберемся. Я это реализовал следующим образом (пока чистый HTML). Форма с тремя тегами.
Первый - для ввода текста;
Второй - для для отмены поиска (снять выделение);
Третий - для поиска (выделить найденные результаты).
Итак, у нас есть поле для ввода и 2 кнопки. JavaScript буду писать в файле js.js. Предпложим, что его вы уже создали и подключили.Первое, что сделаем: пропишем вызовы функции при нажатии на кнопку поиска и кнопку отмены. Выглядеть будет так:
Давайте немного поясню что тут и зачем нужно.Полю с текстом даем id=«text-to-find» (по этому id будем обращатсья к элементу из js ).
Кнопке отмены даем такие атрибуты: type=«button» onclick=«javascript: FindOnPage("text-to-find",false); return false;»
- Тип: button
- При нажатии вызывается функция FindOnPage("text-to-find",false); и передает id поля с текстом, falseКнопке поиска даем такие атрибуты: type=«button» onclick=«javascript: FindOnPage("text-to-find",true); return false;»
- Тип: submit (не кнопка потому, что тут можно юзать Enter после ввода в поле, а так можете и button использовать)
- При нажатии вызывается функция FindOnPage("text-to-find",true); и передает id поля с текстом, trueВы наверняка заметили еще 1 атрибут: true/false . Его будем использовать для определения, на какую именно кнопку нажали (отменить поиск или начать поиск). Если жмем на отмену, то передаем false . Если жмем на поиск, то передаем true .
Окей, двигаемся дальше. Переходим к JavaScript
Будем считать, что вы уже создали и подключили js файл к DOM.
Прежде, чем начнем писать код, давайте отвлечемся и сперва обсудим, как все должно работать. Т.е. по сути пропишем план действий. Итак, нам надо, чтоб при вводе текста в поле шел поиск по странице, но нельзя затрагивать теги и атрибуты. Т.е. только текстовые объекты. Как этого достичь - уверен есть много способов. Но сейчас будем использовать регулярные выражения.
Итак, следующее регулярное выражение будет искать только текст след. вида: ">… текст...<". Т.е. будет проходить поиск только текстовых объектов, в то время, как теги и атрибуты будут оставаться нетронутыми.
/>(.*?) Так мы будем находить нужные части кода, которые будем парсить и искать совпадения с текстом, который ввел пользователь. Затем будем добавлять стили найденным объектам и после этого заменять html - код на новый.
Приступим. Сперва переменные, которые нам понадобятся.
Var input,search,pr,result,result_arr, locale_HTML, result_store; //input - принимаем текст, который ввел пользователь //search - делаем из строки регулярное выражение //pr - сохраняем в нее текущий
//result - выборка текста из pr (т.е. отсекаем теги и атрибуты) //result_arr - аналог pr, но со стилями для подсветки //locale_HTML - оригинал который менять не будем, используем для обнуления стилей
И сразу определим locale_HTML значение независимо от того, ищем мы что-то или нет. Это нужно, чтоб сразу сохранить оригинал страницы и иметь взможность обнулять стили.Var input,search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // сохраняем в переменную весь body (Исходный)
Ок, теперь уже стоит создать функцию, которая вызывается у нас из DOM . Сразу прикинем, что внутри у нас должны быть 2 функции, каждая из которых срабатывает в зависимости от нажатой кнопки. Ведь мы либо проводим поиск, либо обнуляем его. И контроллируется это атрибутом true/false , как вы помните. Так же надо понимать, что при повторном поиске прежние стили должны обнуляться. Таким образом получим следующее: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(); } //Снимаем выделение }
Ок, часть логики реализована, двигаемся дальше. Необходимо проверять полученное слово на количество символов. Ведь зачем нам искать 1 букву/символ. В общем, я решил эту возможность ограничить 3+ символа.Итак, сперва приниамем значение, которое ввел пользователь, и, в зависимости от его длины, выполняем либо основную функцию поиска, либо функцию вывода предупреждения и обнуления. Выглядеть будет так:
<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(); } //Снимаем выделение }
Сейчас поясню этот участок кода. Единственное, что могло стать не ясно - вот эта строка:function FindOnPageBack() { document.body.innerHTML = locale_HTML; }
Тут все просто: метод innerHTML возвращает html код объекта. В данном случае мы просто заменяем текущий body на оригинальный, который мы сохранили при загрузке всей страницы.
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(/>(.*?) Итак, на данном этапе у нас уже есть основные переменные и значения. Теперь надо придать нужным участкам кода стили с выделенным фоном. Т.е. проверка выбранного текста на регулярное выражение (по сути мы выбранный регулярным выражением текст снова парсим регулярным выражением). Для этого надо из введенного текста сделать регулярное выражение (сделали), а затем выполнить метод, переданный в виде такста. Тут нам поможет метод eval() .
В общем, после того, как мы заменим текст и получим результат со стилями, надо текущий html заменить на полученный. Делаем.
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(/>(.*?)"+input+""); //находим нужные элементы, задаем стиль и сохраняем в новый массив } for(var i=0; i
1) Обрежем пробелы у текста, который вводит пользователь. Вставляем этот код:
Input = numer.replace(/^\s+/g,""); input = numer.replace(/{1,}/g," ");
После этой строки:Input = document.getElementById(name).value; //получаем значение из поля в html
2) Сделаем проверку на совпадения (если совпадений не найдено - сообщим об этом). Этот код вставляем внутрь функции function FindOnPageGo() после переменных.Var warning = true; for(var i=0;i
Пару дней назад получил тестовое задание от компании на вакансию Front-end dev. Конечно же, задание состояло из нескольких пунктов. Но сейчас речь пойдет только об одном из них - организация поиска по странице. Т.е. банальный поиск по введенному в поле тексту (аналог Ctrl+F в браузере). Особенность задания была в том, что использование каких-либо JS фреймворков или библиотек запрещено. Все писать на родном native JavaScript .
Поиск готового решения
Первая мысль: кто-то уже точно такое писал, надо нагуглить и скопипастить. Так я и сделал. За час я нашел два неплохих скрипта, которые по сути работали одинаково, но были написаны по-разному. Выбрал тот, в коде которого лучше разобрался и вставил к себе на старничку.Если кому интересно, код брал .
Скрипт сразу заработал. Я думал, что вопрос решен, но как оказалось, не в обиду автору скрипта, в нем был огромный недостаток. Скрипт вел поиск по всему содержимому тега... и, как вы уже наверное догадались, при поиске любого сочетания символов, которые напоминают тег или его атрибуты, ломалась вся страница HTML.
Почему скрипт работал некорректно?
Все просто. Скрипт работает следующим образом. Сперва в переменную записываем все содержимое тега body , затем ищем совпадения с регулярным выражением (задает пользователь при вводе в текстовое поле) и затем заменяем все совпадения на следующий код:...найденное совпадение...
А затем заменяем текущий тег body на новый полученный. Разметка обновляется, меняются стили и на экране подсвечиваются желтым все найденные результаты.Вы уже наверняка поняли, в чем проблема, но я все же объясню подробней. Представьте, что в поле поиска ввели слово «div» . Как вы понимаете, внутри body есть множество других тегов, в том числе и div . И если мы всем к «div» применим стили, указанные выше, то это уже будет не блок, а непонятно что, так как конструкция ломается. В итоге после перезаписи разметки мы получим полностью сломанную веб-страницу. Выглядит это так.
Как видите, страница полностью ломается. Короче говоря, скрипт оказался нерабочим, и я решил написать свой с нуля, чему и посвящается эта статья.
Итак пишем скрипт с нуля
Как все у меня выглядит.Сейчас нас интересует форма с поиском. Обвел ее красной линией.
Давайте немного разберемся. Я это реализовал следующим образом (пока чистый HTML). Форма с тремя тегами.
Первый - для ввода текста;
Второй - для для отмены поиска (снять выделение);
Третий - для поиска (выделить найденные результаты).
Итак, у нас есть поле для ввода и 2 кнопки. JavaScript буду писать в файле js.js. Предпложим, что его вы уже создали и подключили.Первое, что сделаем: пропишем вызовы функции при нажатии на кнопку поиска и кнопку отмены. Выглядеть будет так:
Давайте немного поясню что тут и зачем нужно.Полю с текстом даем id=«text-to-find» (по этому id будем обращатсья к элементу из js ).
Кнопке отмены даем такие атрибуты: type=«button» onclick=«javascript: FindOnPage("text-to-find",false); return false;»
- Тип: button
- При нажатии вызывается функция FindOnPage("text-to-find",false); и передает id поля с текстом, falseКнопке поиска даем такие атрибуты: type=«button» onclick=«javascript: FindOnPage("text-to-find",true); return false;»
- Тип: submit (не кнопка потому, что тут можно юзать Enter после ввода в поле, а так можете и button использовать)
- При нажатии вызывается функция FindOnPage("text-to-find",true); и передает id поля с текстом, trueВы наверняка заметили еще 1 атрибут: true/false . Его будем использовать для определения, на какую именно кнопку нажали (отменить поиск или начать поиск). Если жмем на отмену, то передаем false . Если жмем на поиск, то передаем true .
Окей, двигаемся дальше. Переходим к JavaScript
Будем считать, что вы уже создали и подключили js файл к DOM.
Прежде, чем начнем писать код, давайте отвлечемся и сперва обсудим, как все должно работать. Т.е. по сути пропишем план действий. Итак, нам надо, чтоб при вводе текста в поле шел поиск по странице, но нельзя затрагивать теги и атрибуты. Т.е. только текстовые объекты. Как этого достичь - уверен есть много способов. Но сейчас будем использовать регулярные выражения.
Итак, следующее регулярное выражение будет искать только текст след. вида: ">… текст...<". Т.е. будет проходить поиск только текстовых объектов, в то время, как теги и атрибуты будут оставаться нетронутыми.
/>(.*?) Так мы будем находить нужные части кода, которые будем парсить и искать совпадения с текстом, который ввел пользователь. Затем будем добавлять стили найденным объектам и после этого заменять html - код на новый.
Приступим. Сперва переменные, которые нам понадобятся.
Var input,search,pr,result,result_arr, locale_HTML, result_store; //input - принимаем текст, который ввел пользователь //search - делаем из строки регулярное выражение //pr - сохраняем в нее текущий
//result - выборка текста из pr (т.е. отсекаем теги и атрибуты) //result_arr - аналог pr, но со стилями для подсветки //locale_HTML - оригинал который менять не будем, используем для обнуления стилей
И сразу определим locale_HTML значение независимо от того, ищем мы что-то или нет. Это нужно, чтоб сразу сохранить оригинал страницы и иметь взможность обнулять стили.Var input,search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // сохраняем в переменную весь body (Исходный)
Ок, теперь уже стоит создать функцию, которая вызывается у нас из DOM . Сразу прикинем, что внутри у нас должны быть 2 функции, каждая из которых срабатывает в зависимости от нажатой кнопки. Ведь мы либо проводим поиск, либо обнуляем его. И контроллируется это атрибутом true/false , как вы помните. Так же надо понимать, что при повторном поиске прежние стили должны обнуляться. Таким образом получим следующее: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(); } //Снимаем выделение }
Ок, часть логики реализована, двигаемся дальше. Необходимо проверять полученное слово на количество символов. Ведь зачем нам искать 1 букву/символ. В общем, я решил эту возможность ограничить 3+ символа.Итак, сперва приниамем значение, которое ввел пользователь, и, в зависимости от его длины, выполняем либо основную функцию поиска, либо функцию вывода предупреждения и обнуления. Выглядеть будет так:
<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(); } //Снимаем выделение }
Сейчас поясню этот участок кода. Единственное, что могло стать не ясно - вот эта строка:function FindOnPageBack() { document.body.innerHTML = locale_HTML; }
Тут все просто: метод innerHTML возвращает html код объекта. В данном случае мы просто заменяем текущий body на оригинальный, который мы сохранили при загрузке всей страницы.
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(/>(.*?) Итак, на данном этапе у нас уже есть основные переменные и значения. Теперь надо придать нужным участкам кода стили с выделенным фоном. Т.е. проверка выбранного текста на регулярное выражение (по сути мы выбранный регулярным выражением текст снова парсим регулярным выражением). Для этого надо из введенного текста сделать регулярное выражение (сделали), а затем выполнить метод, переданный в виде такста. Тут нам поможет метод eval() .
В общем, после того, как мы заменим текст и получим результат со стилями, надо текущий html заменить на полученный. Делаем.
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(/>(.*?)"+input+""); //находим нужные элементы, задаем стиль и сохраняем в новый массив } for(var i=0; i
1) Обрежем пробелы у текста, который вводит пользователь. Вставляем этот код:
Input = numer.replace(/^\s+/g,""); input = numer.replace(/{1,}/g," ");
После этой строки:Input = document.getElementById(name).value; //получаем значение из поля в html
2) Сделаем проверку на совпадения (если совпадений не найдено - сообщим об этом). Этот код вставляем внутрь функции function FindOnPageGo() после переменных.Var warning = true; for(var i=0;i
Поле поиска для сайта — один из важнейших элементов пользовательского интерфейса на веб-странице. С его помощью пользователь может найти нужный контент на вашем сайте.
В этом уроке вы узнаете, как создать разметку для поля поиска с помощью HTML5, а также как стилизовать элементы формы, используя возможности CSS3, без использования скриптов.
1. Разметка HTML
Элемент
×Вступай в сообщество «de-kaizer.ru»!ВКонтакте:
Чтобы найти текст на странице, у вас есть несколько вариантов: