как найти в коде элемента нужное слово

Организация поиска по веб-странице на JavaScript (без jQuery)

Пару дней назад получил тестовое задание от компании на вакансию Front-end dev. Конечно же, задание состояло из нескольких пунктов. Но сейчас речь пойдет только об одном из них — организация поиска по странице. Т.е. банальный поиск по введенному в поле тексту (аналог Ctrl+F в браузере). Особенность задания была в том, что использование каких-либо JS фреймворков или библиотек запрещено. Все писать на родном native JavaScript.

(Для наглядности далее буду сопровождать всю статью скринами и кодом, чтоб мне и вам было понятнее, о чем речь в конкретный момент)

Поиск готового решения

Первая мысль: кто-то уже точно такое писал, надо нагуглить и скопипастить. Так я и сделал. За час я нашел два неплохих скрипта, которые по сути работали одинаково, но были написаны по-разному. Выбрал тот, в коде которого лучше разобрался и вставил к себе на старничку.

Если кому интересно, код брал тут.

Почему скрипт работал некорректно?

Все просто. Скрипт работает следующим образом. Сперва в переменную записываем все содержимое тега 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.

Прежде, чем начнем писать код, давайте отвлечемся и сперва обсудим, как все должно работать. Т.е. по сути пропишем план действий. Итак, нам надо, чтоб при вводе текста в поле шел поиск по странице, но нельзя затрагивать теги и атрибуты. Т.е. только текстовые объекты. Как этого достичь — уверен есть много способов. Но сейчас будем использовать регулярные выражения.

Итак, следующее регулярное выражение будет искать только текст след. вида: «>… текст.

Источник

Как найти нужный фрагмент кода в плагине или шаблоне

Здравствуйте. Периодически нужно найти и откорректировать какой-то фрагмент кода, но искать его на хостинге по всем папкам и файлам очень долго. Есть ли какой-то более быстрый способ поиска?

В этой заметке я вам покажу: как найти нужный блок в исходном коде и в каком файле он вызывается.

Как пример возьмем вот этот блок:

Что мы знаем о этой странице?
В вордпресс ее выводит плагин WP-Recall. А сама страница выводится шорткодом productlist с атрибутом type=slab

Инспектируем:
В браузере жмем F12. Открывается консоль разработки. В верхнем углу, слева, в этой панели кнопка «Инспектировать» (иконка курсор с прямоугольником) жмем по ней и тыкаем на искомый элемент на странице:

— ок. Имя дива мы знаем. Это product-metas

Теперь плагин WP-Recall (ведь именно он выводит этот контент в нашем случае) копируем на ПК, и ищем по всем файлам этого плагина (ctrl + shift + F в notepad++)
Находим:

три файла. Один — таблица стилей. Два — темплейты. Этот блок я выводил шорткодом slab. Значит мой вариант — файл product-slab.php

Буквально за 2 минуты мы нашли то что искали. Это даже быстрей чем написать свой вопрос на форуме.

Удачного вам обучения юные вебмастера, веб программисты и просто те, кто настраивает себе свой персональный блог. Эти простые основы помогут вам быстро разобраться в внутреннем устройстве плагинов.

p.s. один знающий товарищ написал:

Всё, что выше написал коллеги касается файлов темы, но не движка или плагинов, потому как корректировать их код ненужно и может быть опасно.

но есть случаи не для правки (мой ответ):

не всегда чтобы что-то найти ищут именно для изменения. Мне часто надо просто глянуть исходники и найти за что зацепиться чтобы решить свою задачу — т.к. у 99% плагинов нет технического описания их api. Вот и изучаю самостоятельно.

т.е. так я могу найти нужную мне функцию (чтобы вывести какой либо блок в произвольном месте, или посмотреть аргументы функции и зависимости), посмотреть есть ли в ней хуки и фильтры или посмотреть кто же еще вызывает эту функцию.

Источник

4 место Правильный поиск элементов на странице и работа с ними! Основы и хитрости! Должен знать каждый!

LightWood

Moderator

Эта статья техническая. В ней разобраны самые основы.
Понимание основ и умение их применять позволит Вам решать большинство задач.

Текста много, но все просто, если вчитаться.

Если обобщить, то работа шаблонов зенно постера состоит из двух видов операций :
1. Логических
2. Работы с элементами на странице.

В данной статье пойдет разговор про понимание и умение применять самые основы работы с элементами.

Для ознакомления выберите в действиях: Get и введите какой-либо атрибут и ознакомьтесь с результатами.

Для примера возьмем такой тег:

Продемонстрирую значение следующих атрибутов:
innertext = Это жирный текст
innerhtml = Это жирный текст
Т.е. innertext берет только текст внутри тега, а innerhtml берет в том числе теги внутри нашего обрабатываемого тега

Тип поиска:
Но не всегда обязательно указывать такое точное вхождение в поле » значение » для поиска.

Условие тип поиска может быть следующих видов:
—text
—regexp
—notext

Т.к. это универсальный участок атрибута для обоих тегов
Найдутся оба тега, но они будут под разными номерами совпадений. (про совпадения поговорим чуть ниже)

Регулярные выражения — формальный язык поиска и осуществления манипуляций с подстроками в тексте, основанный на использовании мета-символов. По сути это строка-образец (по-русски её часто называют « шаблоном », « маской »), состоящая из символов и мета-символов и задающая правило поиска.
Крайне советую изучить самые основы. Для понимания процессов. Ничего сложного.
-https://ru.wikipedia.org/wiki/Регулярные_выражения
-http://zennolab.com/wiki/ru:creating-a-regular-expressions

Вставим в текст для обработки:
автомобиль
электроавтомобиль
электромобиль
электроскуторомобиль
Искомый текст всегда начинается с: электро
Этим заканчивается искомый текст: мобиль
Регулярное выражение отобразится как:
электро.*?мобиль

— notext
Помогает находить элементы, значение заданных атрибутов которых не содержит заданный текст.

Приведу пример, у нас на странице есть две кнопки:

Параметр notext не может содержать регулярные выражения, только текст, как он есть.

Номер совпадения на странице:
Если элементов несколько и они удовлетворяют одним и тем же условиям при поиске, то они точно будут отличаться по номеру совпадения.
Отчет ведется с начала страницы и начинается с нуля.

По условиям поиска элементов на этом все. Далее мы будет разбираться, как можно группировать условия, задавать порядок поиска атрибутов, как воздействовать на код страницы.

Т.е. например, я могу присвоить любому элементу желаемый стиль, или какой-то уникальный атрибут для того, что бы находить в следующий раз этот элемент по этому уникальному атрибуту. Приведу наглядный пример для чего это может пригодиться.

Есть например такой код:

теперь участок кода имеет вид:

Т.е. участок кода теперь выглядит так:

Для примера я кликнул по какой-то ссылке на главной гугла и, давайте откроем шаг через редактор и посмотрим что же нам записалось:

Для себя, я бы удалил все условия, кроме условия 3, и подправил его так, как я советовал выше.

Кстати, для удаления условия нужно кликнуть на мелкий прямоугольник левее номера группы и нажать » Delete » на клавиатуре.

Группирование условий поиска элемента:
представим, что на странице есть эти ссылки в рандомной очередности:

Источник

Как найти элемент в коде

Новичку очень трудно найти нужный символ или слово в массе кода, однако это делается очень быстро и просто. Если не знаете как, то читайте дальше.

В следующей статье, мы приступим к редактированию шаблона, и нам придётся находить нужные элементы в коде темы.

Если кто-то ещё не видел, что из себя представляет код шаблона, то зайдите в Консоль — Внешний вид — Редактор.

Для полноты ощущения, можно открыть один из php файлов, которые расположены в колонке справа от поля редактора.

Только сразу отгоните мысль типа: «Я в этом до самой смерти не разберусь». Разберётесь, и я Вам в этом помогу.

Рассмотрим два варианта, в зависимости от начальных условий, нахождения нужного элемента в коде.

Условие: мы точно знаем то, что нам нужно найти.

Для примера возьмём код страницы.

Комбинация клавиш Contrl-F откроет окно поиска в правом верхнем углу, в которое можно ввести искомый элемент кода. Элемент и все его повторения подсветятся.

Этот поиск работает абсолютно для любого кода, открытого в браузере, то есть на странице.

Условие: мы видим элемент на странице, но не знаем ни его html, ни css.

В этом случае потребуется web-инспектор, или по другому Инструмент разработчика.

Инструмент разработчика есть во всех браузерах и открыть его можно или клавишей F12, или правой клавишей мыши, выбрав «Просмотреть код» или «Исследовать элемент». В разных браузерах по разному.

Главное не выбирайте «Просмотреть код страницы». Похоже, но не то.

После этого появится web-инспектор. Его интерфейс в разных браузерах немного отличается, но принцип действия везде одинаковый.

Я покажу на примере web-инспектора Chrome.

Заходим на страницу и открываем web-инспектор. По умолчанию он откроется в двух колонках, в левой будет html код всех элементов, находящихся на странице, а в правой — css оформление.

Изначально, код откроется в сложенном виде, то есть будут видны только основные элементы страницы, но если щёлкнуть по треугольничку в начале строки, то откроются все вложения, находящиеся в элементе.

И вот так, открывая вложение за вложением, можно добраться практически до любого элемента, находящегося на странице.

Определить, какой код, какому элементу соответствует, очень просто.

Надо просто вести по строкам курсором, и как только курсор оказывается на строке с кодом, так тут-же элемент, которому соответствует этот код, подсвечивается.

Теперь найдём css этого элемента. Для этого надо один раз щёлкнуть левой клавишей по строке с html, и в правой колонке отобразятся все стили, которые ему заданы, а так-же стили, влияющие на элемент, от родительских элементов.

Теперь, зная class или id элемента, можно спокойно идти в файл style.css, найти в нём нужный селектор, с помощью Поиска (Ctrl+F), и править внешний вид элемента.

Желаю творческих успехов.

Перемена

— Мам, ну почему ты думаешь, что если я была на дне рождения, то сразу пила?!
— Дочь а нечего что я папа?
Объявление в метро: «при обнаружении подозрительных предметов сделайте подозрительное лицо.

Источник

Поиск и замена текста

С помощью элементов управления Поиск и замена (CTRL+F или CTRL+H) и Поиск и замена в файлах (CTRL+SHIFT+F или CTRL+SHIFT+H) можно найти и заменить текст в редакторе Visual Studio. Вы можете найти и заменить только несколько экземпляров текста с помощью выбора нескольких точек вставки.

Если необходимо переименовать символы кода, такие как имена переменных или методов, то вместо поиска и замены лучше выполнить рефакторинг. Рефакторинг обладает интеллектуальными возможностями и может распознавать области, в то время как функция поиска и замены слепо заменяет все вхождения.

Возможность поиска и замены доступна в редакторе, в некоторых других текстовых окнах (например, в результатах поиска), в окнах конструкторов (например, в конструкторе XAML и в конструкторе Windows Forms) и в окнах инструментов.

Поле Найти/команда доступно как элемент управления панели инструментов, но оно не отображается по умолчанию. Чтобы отобразить поле Найти/команда, выберите на стандартной панели инструментов команду Добавить или удалить кнопки и щелкнув Найти.

Элемент управления «Поиск и замена»

Элемент управления Поиск и замена отображается в правом верхнем углу окна редактора кода. Он немедленно выделяет все вхождения заданной поисковой строки в текущем документе. Вы можете переходить от одного вхождения к другому, нажав кнопку Найти далее или Найти предыдущий на элементе управления поиска.

Перейти к параметрам замены можно, нажав кнопку рядом с текстовым полем Найти. Чтобы изменять по одному вхождению за раз, выберите Заменить следующий рядом с текстовым полем Заменить. Чтобы заменить все найденные совпадения, нажмите кнопку Заменить все.

Чтобы изменить цвет выделения совпадений, в меню Сервис последовательно выберите Параметры, затем Среда, а затем Шрифты и цвета. В списке Показать параметры для выберите Текстовый редактор, а затем в списке Отображаемые элементы выберите Найти выделенный текст (расширение).

Окна инструмента поиска

Элемент управления Найти можно использовать в текстовых окнах и окнах кода, таких как окна вывода и результатов поиска, выбрав Правка > Поиск и замена (или нажав клавиши CTRL+F).

Версия элемента управления Найти также доступна в некоторых окнах инструментов. Например, можно фильтровать список элементов управления в окне панели элементов путем ввода текста в поле поиска. Другие окна инструментов, для которых поддерживается поиск содержимого, включают обозреватель решений, окно Свойства и Team Explorer.

Поиск и замена в файлах

Функции Найти/Заменить в файлах аналогичны функциям элемента управления Поиск и замена за исключением того, что можно определить область поиска. Вы можете выполнить поиск не только в текущем открытом файле в редакторе, но также во всех открытых документах, всем решении, текущем проекте и выбранном наборе папок. Также можно выполнять поиск по расширению имени файла. Чтобы перейти к диалоговому окну поиска и замены в файлах, выберите Поиск и замена в меню Правка (или нажмите клавиши CTRL+SHIFT+F).

Результаты поиска

При выборе варианта Найти все откроется окно Результаты поиска со списком найденных совпадений. При выборе результата в списке отображается связанный файл и выделяется искомый текст. Если файл не открыт для редактирования, он открывается на вкладке предварительного просмотра в правой части набора вкладок. Для поиска в списке Результаты поиска можно использовать элемент управления Найти.

Создание пользовательских наборов папок поиска

Область поиска можно определить, нажав кнопку Выбор папок поиска (она выглядит как . ) рядом с полем Поиск в. В диалоговом окне Выбор папок поиска можно указать набор папок для поиска и сохранить спецификацию для дальнейшего использования.

Если к вашему компьютеру подключен диск удаленного компьютера, можно указать папки для поиска на удаленном компьютере.

Создание пользовательских наборов компонентов

Выбор нескольких точек вставки

Этот раздел относится к Visual Studio в Windows. Информацию о Visual Studio для Mac см. в статье Выбор блока.

Новая возможность в Visual Studio 2017 версии 15.8

Используйте выбор нескольких точек вставки, чтобы внести одинаковые изменения в несколько мест одновременно. Например, вы можете вставить одинаковый текст или изменить существующий текст в нескольких местах одновременно.

Чтобы выбрать несколько точек вставки, выберите первый фрагмент текста обычным образом, а затем нажмите клавишу ALT и выберите фрагменты в других местах. Можно также автоматически добавить совпадающий текст в качестве дополнительного выделения или выбрать поле текста для внесения одинаковых правок в каждой строке.

Если вы выбрали ALT как клавишу-модификатор для команды «Перейти к определению» по щелчку мыши в меню Сервис > Параметры, функция выбора нескольких точек вставки недоступна.

Команды

Используйте следующие клавиши и действия для выбора нескольких точек вставки:

Некоторые команды также доступны в меню Изменить в разделе Несколько точек вставки:

Источник