Как быстро найти нужную строчку в html коде?
Как быстро найти известную строчку среди сотен и тысяч строк html кода?
Открываете код в блокноте или любом другом текстовом редакторы, я советую Notepad++ или SublimeText2. Далее, нажимаете Ctrl+F и вводите часть текста, курсор сфокусируется на нужном месте. Также можно менять сразу все слова в тексте на другое, для этого используйте сочетание клавиш Ctrl+H.
Самое удобное — открыть текст в Notepad++ и задать необходимую фразу поиска , нажав комбинацию Ctrl+F. В появившемся окне поиска после указания нужного текста просто жмем "Найти".
Иногда вордовский документ можно попытаться сохранить в HTML-коде, но это не лучший вариант, сохранение часто грешит потерями.
Надо открыть html код редактором Notepad++, и в верхнем меню нажать на иконку бинокля, откроется окно поиска, вставляешь известную строчку, нажимаешь найти.
При вводе строки по CTRL+F в коде надо помнить, что внутри строчки не должно быть никаких тегов, например изменения шрифта или стиля, иначе строчка может и не найтись в поиске по тексту HTML кода.
Например текст на странице такой:
2х2=4
Это же самое в HTML коде выглядит так:
Поиск ничего не даст
Такое бывает в тех случаях когда внутри строки используются теги; в этом случае надо найти и скопировать строчку на экране, затем преобразовать в HTML (фрагмент кода для преобразования приведен в ответе на вопрос Какие есть толковые способы перевести doc в html?) и только потом, зная как закодирована строчка, можно искать этот код в коде HTML.
Методы JavaScript для поиска элементов на странице
В этой статье мы изучим методы JavaScript для поиска элементов в HTML-документе: querySelector , querySelectorAll , getElementById и другие. Кроме них рассмотрим ещё следующие: matches , contains и closest . Первые два из них могут быть полезны для выполнения различных проверок, а третий использоваться, когда нужно получить родительский элемент по CSS-селектору.
Методы для выбора HTML-элементов
Работа с веб-страницей так или иначе связана с манипулированием HTML-элементами. Но перед тем, как над ними выполнить некоторые действия (например, добавить стили), их сначала нужно получить.
Выбор элементов в основном выполняется с помощью этих методов:
Они позволяют выполнить поиск HTML-элементов по CSS-селектору . При этом querySelector выбирает один элемент, а querySelectorAll – все.
Кроме них имеются ещё:
Но они сейчас применяются довольно редко. В основном используется либо querySelector , либо querySelectorAll .
querySelectorAll
Метод querySelectorAll применяется для выбора всех HTML-элементов , подходящих под указанный CSS-селектор. Он позволяет искать элементы как по всей странице, так и внутри определённого элемента:
Здесь на первой строчке мы нашли все элементы с классом item . На следующей строчке мы сначала выбрали элемент с id=»slider» , а затем в нём все HTML-элементы с классом btn .
Метод querySelectorAll как вы уже догадались принимает в качестве аргумента CSS-селектор в формате строки, который соответственно и определяет искомые элементы. В качестве результата querySelectorAll возвращает объект класса NodeList . Он содержит все найденные элементы:
Полученный набор представляет собой статическую коллекцию HTML-элементов. Статической она называется потому, что она не изменяется. Например, вы удалили элемент из HTML-документа, а в ней как был этот элемент, так он и остался. Чтобы обновить набор, querySelectorAll нужно вызвать заново:
Узнать количество найденных элементов можно с помощью свойства length :
Обращение к определённому HTML-элементу коллекции выполняется также как к элементу массива, то есть по индексу. Индексы начинаются с 0 :
Здесь в качестве результата мы получаем HTML-элемент или undefined , если элемента с таким индексом в наборе NodeList нет.
Перебор коллекции HTML-элементов
Перебор NodeList обычно осуществляется с помощью forEach :
Также перебрать набор выбранных элементов можно с помощью цикла for или for. of :
querySelector
Метод querySelector также как и querySelectorAll выполняет поиск по CSS-селектору . Но в отличие от него, он ищет только один HTML-элемент:
На первой строчке мы выбираем HTML-элемент, имеющий в качестве id значение title . На второй мы ищем в <body> HTML-элемент по тегу footer .
В качестве результата этот метод возвращает найденный HTML-элемент или null , если он не был найден.
querySelector всегда возвращает один HTML-элемент, даже если под указанный CSS-селектор подходят несколько:
Задачу, которую решает querySelector можно выполнить через querySelectorAll :
Но querySelector в отличие от querySelectorAll делает это намного быстрее, да и писать так проще. То есть querySelectorAll не возвращает как querySelector сразу же первый найденный элемент. Он сначала ищет все элементы, и только после того, как он это сделает, мы можем уже обратиться к первому HTML-элементу в этой коллекции.
Обычно перед тем, как выполнить какие-то действия с найденным HTML-элементом необходимо сначала проверить, а действительно ли он был найден :
Здесь мы сначала проверили существования HTML-элемента, и только потом выполнили над ним некоторые действия.
Методы getElement(s)By* для выбора HTML-элементов
Здесь мы рассмотрим методы, которые сейчас применяются довольно редко для поиска HTML-элементов. Но в некоторых случаях они могут быть очень полезны. Это:
- getElementById – получает один элемент по id ;
- getElementsByClassName – позволяет найти все элементы с указанным классом или классами;
- getElementsByTagName – выбирает элементы по тегу;
- getElementsByName – получает все элементы с указанным значением атрибута name .
1. Метод getElementById позволяет найти HTML-элемент на странице по значению id :
В качестве результата getElementById возвращает объект класса HTMLElement или значение null , если элемент не был найден. Этот метод имеется только у объекта document .
Указывать значение id необходимо с учётом регистра. Так например, document.getElementById(‘aside’) и document.getElementById(‘ASIDE’) ищут элементы с разным id .
Обратите внимание, что в соответствии со стандартом в документе не может быть несколько тегов с одинаковым id , так как значение идентификатора на странице должно быть уникальным.
Тем не менее, если вы допустили ошибку и в документе существуют несколько элементов с одинаковым id , то метод getElementById более вероятно вернёт первый элемент, который он встретит в DOM. Но на это полагаться нельзя, так как такое поведение не прописано в стандарте.
То, что делает getElementById можно очень просто решить посредством querySelector :
Кстати, оба этих метода возвращают в качестве результата один и тот же результат. Это либо HTML-элемент (экземпляр класса HTMLElement ) или null , если элемент не найден.
2. Метод getElementsByClassName позволяет найти все элементы с заданным классом или классами. Его можно применить для поиска элементов как во всём документе, так и внутри указанного. В первом случае его нужно будет вызывать как метод объекта document , а во втором – как метод соответствующего HTML-элемента:
В качестве результата он возвращает живую HTML-коллекцию найденных элементов . Чем живая коллекция отличается от статической мы рассмотрим ниже.
Здесь мы сохранили найденные элементы в переменные elsControl и elsFormControl . В первой переменной будет находиться HTMLCollection , содержащая элементы с классом control . Во второй – набор элементов с классом form-control , находящиеся в форме с id=»myform» . Для получения этой формы мы использовали document.forms.myform .
Метод getElementsByClassName позволяет искать элементы не только по одному классу, но и сразу по нескольким, которые должны присутствовать у элемента:
На querySelectorAll этот пример решается так:
3. Метод getElementsByTagName предназначен для получения коллекции элементов по имени тега:
На первой строчке мы выбрали все <a> в документе и присвоили полученную HTMLCollection переменной anchors . На второй – мы сначала получили #list , а затем в нём нашли все <li> .
Задачу по выбору элементов внутри другого элемента с помощью querySelectorAll выполняется намного проще:
Для выбора всех элементов можно использовать символ * :
4. В JavaScript getElementsByName можно использовать для выбора элементов, имеющих определенное значение атрибута name :
Через querySelectorAll это выполняется так:
getElementsBy* и живые HTML-коллекции
В JavaScript getElementsByTagName , getElementsByClassName и getElementsByName в отличие от других методов (например, querySelectorAll ) возвращают живую коллекцию HTML-элементов (на английском live HTMLCollection ). То есть коллекцию содержимое которой автоматически обновляется при изменении DOM. Для наглядности рассмотрим следующий пример.
Например, на странице изначально имеется два <li> . Выберем их с помощью getElementsByTagName и сохраним полученную HTMLCollection в переменную els . Теперь с помощью els мы можем получить эту коллекцию. Сейчас в ней два <li> . Затем через 5 секунд, используя setTimeout добавим ещё один <li> . Если сейчас мы обратимся к переменной els , то увидим, что в ней уже находятся три <li> :
Как вы видите, здесь полученная коллекция является живой, то есть она может автоматически измениться. В ней сначала было два <li> . Но после того, как мы на страницу добавили ещё один подходящий элемент, в ней их стало уже три.
Если в коде приведённом выше заменить выбор элементов на querySelectorAll , то мы увидим, что в ней находится статическая (не живая) коллекция элементов:
Как вы видите количество элементов в коллекции не изменилось. Чтобы после изменения DOM получить актуальную коллекцию элементов, их нужно просто выбрать заново посредством querySelectorAll :
Таким образом в JavaScript насчитывается 6 основных методов для выбора HTML-элементов на странице. По чему они ищут и что они возвращают приведено на следующем рисунке:
Экземпляры класса HTMLCollection не имеют в прототипе метод forEach . Поэтому если вы хотите использовать этот метод для перебора такой коллекции, её необходимо преобразовать в массив:
matches, closest и contains
В JavaScript имеются очень полезные методы:
- matches – позволяет проверить соответствует ли HTML-элемент указанному CSS-селектору;
- closest – позволяет найти для HTML-элемента его ближайшего предка, подходящего под указанный CSS-селектор (поиск начинается с самого элемента);
- contains – позволяет проверить содержит ли данный узел другой в качестве потомка (проверка начинается с самого этого узла).
1. Метод matches ничего не выбирает, но он является очень полезным, так как позволяет проверить HTML-элемент на соответствие CSS-селектору. Он возвращает true , если элемент ему соответствует, иначе false .
Пример, в котором выберем все <li> , расположенные внутри #questions , а затем удалим те из них, которые соответствуют селектору .answered :
В этом примере проверим каждый <li> на соответствие селектору active . Выведем в консоль каждый такой элемент:
Ранее, в «старых» браузерах данный метод имел название matchesSelector , а также поддерживался с использованием префиксов. Если вам нужна поддержка таких браузеров, то можно использовать следующий полифилл:
2. Метод closest очень часто используется в коде. Он позволяет найти ближайшего предка, подходящего под указанный CSS-селектор. При этом поиск начинается с самого элемента, для которого данный метод вызывается. Если этот элемент будет ему соответствовать, то closest вернёт его.
Здесь мы сначала выбираем HTML-элемент .level-3 и присваиваем его переменной el . Далее мы пытаемся среди предков этого элемента включая его сам найти такой, который отвечает заданному CSS-селектору, в данном случае .level-1 .
Начинается поиск всегда с самого этого элемента. В данном случае он не подходит под указанный селектор. Следовательно, этот метод переходит к его родителю. Он тоже не отвечает этому CSS-селектору. Значит, closest переходит дальше, то есть уже к его родителю. Этот элемент подходит под указанный селектор. Поэтому поиск прекращается и этот метод возвращает его в качестве результата.
Метод closest возвращает null , когда он дошёл бы конца иерархии и не нашёл элемент отвечающий указанному селектору. То есть, если такого элемента нет среди предков.
В этом примере найдем с помощью closest для .active его ближайшего родителя, отвечающего CSS-селектору #list > li :
В JavaScript closest очень часто используется в обработчиках событий. Это связано с тем, чтобы события всплывают и нам нужно, например, узнать кликнул ли пользователь в рамках какого-то элемента:
3. Метод contains позволяет проверить содержит ли некоторый узел другой в качестве потомка. При этом проверка начинается с самого этого узла, для которого этот метод вызывается. Если узел соответствует тому для которого мы вызываем данный метод или является его потомком, то contains в качестве результата возвращает логическое значение true . В противном случае false :
Здесь выражение elDiv1.contains(elDiv1) возвращает true , так как проверка начинается с самого элемента. Это выражение elDiv1.contains(elDiv3) тоже возвращает true , так как elDiv3 находится внутри elDiv1 . А вот elDiv1.contains(elDiv4) в качестве результата возвращает false , так как elDiv4 не находится внутри elDiv1 .
В этом примере проверим с помощью contains содержит ли <p> другие узлы в качестве потомка:
Метод contains позволяет проверить является ли потомком не только узел-элемент, но и любой другой узел. Например, узнаем является ли потомком elDiv1 указанный текстовый узел:
Задачи
1. Узнать количество элементов с атрибутом data-toggle=»modal» на странице:
2. Найти все элементы <a> с классом nav внутри элемента <ul> :
3. Получить элемент по id , значение которого равно pagetitle :
4. Выполнить поиск элемента по классу nav :
5. Найти элемент <h3> , находящийся в теге <div> с классом comments , который в свою очередь расположен в <main> :
Finding all tags and attributes in a HTML
I am a newbie and looking at HTML code for first time. For my research I need to know the number of tags and attributes in a webpage.
I looked at various parser and found Beautiful Soup to be one of the most preferred one. The following code (taken from Parsing HTML using Python) shows the way to parse a file:
I found find_all quite useful, but needs an argument to find something.
Can someone guide me on how to know the count of all tags and attributes in a html page?
Организация поиска по веб-странице на JavaScript (без 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 — код на новый.
Приступим. Сперва переменные, которые нам понадобятся.
И сразу определим locale_HTML значение независимо от того, ищем мы что-то или нет. Это нужно, чтоб сразу сохранить оригинал страницы и иметь взможность обнулять стили.
Ок, теперь уже стоит создать функцию, которая вызывается у нас из DOM. Сразу прикинем, что внутри у нас должны быть 2 функции, каждая из которых срабатывает в зависимости от нажатой кнопки. Ведь мы либо проводим поиск, либо обнуляем его. И контроллируется это атрибутом true/false, как вы помните. Так же надо понимать, что при повторном поиске прежние стили должны обнуляться. Таким образом получим следующее:
Ок, часть логики реализована, двигаемся дальше. Необходимо проверять полученное слово на количество символов. Ведь зачем нам искать 1 букву/символ. В общем, я решил эту возможность ограничить 3+ символа.
Итак, сперва приниамем значение, которое ввел пользователь, и, в зависимости от его длины, выполняем либо основную функцию поиска, либо функцию вывода предупреждения и обнуления. Выглядеть будет так:
Сейчас поясню этот участок кода. Единственное, что могло стать не ясно — вот эта строка:
function FindOnPageBack()
Тут все просто: метод innerHTML возвращает html код объекта. В данном случае мы просто заменяем текущий body на оригинальный, который мы сохранили при загрузке всей страницы.
Двигаемся дальше. Даем значения основным переменным.
Итак, на данном этапе у нас уже есть основные переменные и значения. Теперь надо придать нужным участкам кода стили с выделенным фоном. Т.е. проверка выбранного текста на регулярное выражение (по сути мы выбранный регулярным выражением текст снова парсим регулярным выражением). Для этого надо из введенного текста сделать регулярное выражение (сделали), а затем выполнить метод, переданный в виде такста. Тут нам поможет метод eval().
В общем, после того, как мы заменим текст и получим результат со стилями, надо текущий html заменить на полученный. Делаем.
По сути все готово, и скрипт уже работает. Но добавим еще пару деталей для красоты.
1) Обрежем пробелы у текста, который вводит пользователь. Вставляем этот код:
После этой строки:
2) Сделаем проверку на совпадения (если совпадений не найдено — сообщим об этом). Этот код вставляем внутрь функции function FindOnPageGo() после переменных.
Посмотреть исходник можно тут.
Скачать исходник можно тут.
Теперь все. Конечно, можно добавить скролл к первому найденному результату, живой поиск ajax, да и вообще улучшать можно бесконечно. Сейчас это довольно примитивный поиск по сайту. Целью статьи было помочь новичкам, если возникет такой же вопрос как у меня. Ведь простого готового решения я не нашел.
P.S.: для корректной работы необходимо убрать переносы текста в html документе в тех местах, где есть обычный текст между тегами.
Это не принципиально, можно от этих переносов избаляться автоматически на сервисе, но может подскажете заодно, как это пофиксить, если поймете раньше меня.
Также, если кто писал подобное, но с живым поиском, поделитесь исходником, будет интересно разобрать.
Буду рад выслушать конструкнтиную критику, мнения, может, рекомендации.
На днях дописал немного код, сделал живой поиск по странице. Так, что вопрос снят. Код HTML не менялся. JS можете посмотреть тут.
Поиск ведется по тегам с классом «place_for_live_search». Так что для того, чтоб алгоритм парсил нужный контент, добавляем класс и готово.