Поиск контента с помощью регулярных выражений и других методов

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

• Синтаксис регулярных выражений
• Сценарий №1 — Замена текста на переменную
• Сценарий №2 — Замена повторяющихся фрагментов контента сниппетами
• Сценарий №3 - Очистка форматирования после импорта контента
• Сценарий №4 — Поиск тега с переменными атрибутами
• Сценарий №5 — Очистка заголовков и футеров с неизвестной структурой тегов
• Сценарий №6 — Поиск определенного CSS-класса
• Сценарий №7 — Поиск условного тега
• Сценарий №8 — Поиск ссылки на страницу или изображение
• Сценарий №9 — Поиск и переименование переменных и условных тегов в режиме редактирования
• Сценарий №10 — Поиск и замена ссылок на изображения после перемещения изображений в другое место

Синтаксис регулярных выражений

Перед началом обратите внимание на несколько ключевых моментов о синтаксисе регулярных выражений:

• Глобальный поиск и замена поддерживает синтаксис регулярных выражений .NET. Для получения более подробной информации ознакомьтесь со следующей статьей Microsoft: Язык регулярных выражений — краткий справочник.
• При использовании диалогового окна Поиск и замена в редакторе исходного кода страницы, редакторе HTML, редакторе JavaScript, редакторе CSS и редакторе примеров кода Документерра использует синтаксис регулярных выражений JavaScript. Для получения более подробной информации обратитесь к этому разделу: Справочник регулярных выражений JavaScript RegExp. Имейте в виду, что в Документерре можно использовать регулярные выражения без кавычек и косой черты.
• На странице Глобальный поиск и замена и в диалоговых окнах Поиска и замены в редакторах можно использовать символ $ с числом (например, $1, $2 и т. д.) для ссылки на конкретное совпадение поиска.
• Некоторые символы, такие как ? *+.\$^{}()| могут иметь особое значение в регулярных выражениях. Если вам нужно использовать данные символы при поиске, убедитесь, что вы исключили их в строке поиска, добавив обратную косую черту перед символом. Например, \? или \*.
• Если вы не уверены в правильности использования регулярных выражений, мы рекомендуем использовать REGEX TESTER для тестирования и исправления регулярных выражений.

Сценарий №1 — Замена текста на переменную

Предположим, вы добавили название своей компании на все свои страницы.

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

• Введите название компании в поисковую строку и установите соответствующие галочки фильтров.
  
  
• Нажмите Найти все.
• Вставьте код <ch:var name="companyName" /> в поле Заменить на.
  
  
• Выберите страницы, на которых вы хотите заменить название компании на переменную. 
• Нажмите Заменить выбранное (или Заменить все, если вам нужно выполнить замену на всех страницах).
• Результат:
  
  

Сценарий №2 — Замена повторяющихся фрагментов контента сниппетами

Предположим, что после импорта документации у вас есть повторяющийся фрагмент контента на нескольких страницах. Например, такое предложение:

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

Вот как выглядит разметка предложения:

<p>Создайте робота за несколько шагов: сборка, подключение и программирование — быстро и легко!</p>

Чтобы оно появилось на всех страницах, вставьте \s*?   до и после открывающих и закрывающих тегов. Для нашего предложения поисковый запрос будет выглядеть так:

<p>\s*?Создайте робота за несколько шагов: сборка, подключение и программирование — быстро и легко!\s*?</p>

Это может показаться сложным, но главное, что нужно помнить, — это добавить \s*? перед каждым открывающим и закрывающим тегом.

Перейдите на страницу Глобального поиска и замены. 

Чтобы заменить предложение сниппетом, выполните следующие шаги:

• Используйте поисковый запрос в качестве строки поиска.
• Установите соответствующие галочки фильтра — Регулярное выражение и Страницы (название и HTML) обязательны.
• Нажмите Найти все.
• Выберите все страницы, кроме той, которую вы только что создали в качестве сниппета (иначе ее код также будет заменен).
• Заполните поле Заменить на ссылкой на сниппет. Вот пример того, как это будет выглядеть:
  

  Скопировать код HTML

  <ch:snippet url="/articles/project-rukovodstvo-po-izgotovleniyu-robotov/vstupleniye"/>

  
  
• Нажмите Заменить выбранное.

Вот и все — статический контент был успешно заменен на сниппет.

Сценарий №3 - Очистка форматирования после импорта контента

Предположим, вы хотите удалить заголовок, который был импортирован из сторонней программы:

При переключении в режим исходного кода HTML-код заголовка будет выглядеть так:

Чтобы найти его, вы можете использовать его идентификатор:

<div[^>]*?id="pnlHeader"[^>]*?>\s*?Создано с помощью сторонней программы.\s*?</div>

или его класс:

<div[^>]*?class="header"[^>]*?>\s*?Создано с помощью сторонней программы.\s*?</div>

Как видите, мы добавили [^>]*?. Чтобы игнорировать все остальные атрибуты текущего тега, вы можете использовать это регулярное выражение в подобных случаях.

Сценарий №4 — Поиск тега с переменными атрибутами

Этот сценарий можно использовать в различных ситуациях, но в нашем случае мы хотим найти и удалить следующий заголовок:

   
Его код в режиме исходного кода выглядит так:

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

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

А вот на другой странице (текст навигационной ссылки другой):

Вы можете сопоставить обе версии, используя что-то общее, например:

<div id="pnlHeader">
  <div[^>]*?class="headerText"[^>]*?>[^<]*?</div>
  <a[^>]*?>[^<]*?</a>
</div>

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

<div id="pnlHeader">\s*?<div[^>]*?class="headerText"[^>]*?>[^<]*?</div>\s*?<a[^>]*?>[^<]*?</a>\s*?</div>

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

Сценарий №5 — Очистка заголовков и футеров с неизвестной структурой тегов 

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

• Например, у вас есть заголовок, который в режиме редактирования выглядит следующим образом:
  
  
• А вот исходный код для этого блока:
  
  
• Можно указать начало и конец контента, поэтому ваш поисковый запрос будет выглядеть следующим образом:
  

  Скопировать код HTML

  ^.*?<div[^>]*?id="pnlContent"[^>]*?>(.+)</div>\s*?<div[^>]*?class="footer".*?$

  
  
• Заполните поле Заменить на регулярным выражением: $1
  
• Затем продолжайте выполнять шаги. 
• Результат будет следующим:
  
  

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

Сценарий №6 — Поиск определенного CSS-класса

Полезно очистить контент после импорта из MS Word, так как CSS-классы могут создаваться с автоматическими именами для повторяющихся стилей. Для получения более подробной информации обратитесь к этому разделу: Импорт из Microsoft Word. Вот несколько примеров использования:

• Автоматические имена CSS-классов

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

• Имена других классов
  

  Имена классов могут различаться и даже совпадать с именами тегов. В таком случае требуется двухэтапная замена. 

Например, если нужно найти имя класса «myClass» во всех CSS-стилях, мы будем использовать следующее регулярное выражение:

\.myClass\b

Как видите, мы используем обратный слеш \ для точки и \b для обозначения границы слова.

Для HTML поиск всех мест, где используется myClass, будет выглядеть следующим образом:

(<[^>]+?class=['"][^'"]*?)\bmyClass\b

• Затем следует сопоставить начало тега и его атрибут class с другими возможными классами, которые могут находиться перед нужным классом. Они будут в группе, которую мы не должны удалять или редактировать. Далее, мы находим нужный класс, который будет окружен границами слов. В квадратных скобках используются одинарные или двойные кавычки. Выражение типа [^'"] означает, что нужно найти все символы, кроме одинарных и двойных кавычек, чтобы не выйти за рамки атрибута класса.  
• Заполните поле Заменить на выражением $1myNewClass. Затем продолжайте выполнять шаги.
• Например, для следующей части:
  

  Скопировать код CSS

  <div class="firstClass myClass otherClass">

  
  
• Результат будет таким:
  

  Скопировать код CSS

  <div class="firstClass myNewClass otherClass">

  
  

Сценарий №7 — Поиск условного тега

Предположим, вам нужно найти тег PrintedDoc.

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

(<ch:[^>]*?tags=['"][^'"]*?)\bPrintedDoc\b

Для того, чтобы заменить его, заполните поле Заменить на выражением $1NewOutputTag. Затем продолжайте выполнять шаги.

Например, если бы у нас была следующая разметка Exclude Block:

<ch:exclude tags="AdminGuide,PrintedDoc">

После операции замены, результат будет выглядеть следующим образом:

<ch:exclude tags="AdminGuide,NewOutputTag">

Сценарий №8 — Поиск ссылки на страницу или изображение

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

Например, если нужно найти, где используется страница, просто введите в строку поиска её название, идентификатор или URL-адрес.

Сценарий №9 — Поиск и переименование переменных и условных тегов в режиме редактирования

Например, если нужно переименовать переменную с тегом companyName:

• Вот как она выглядит в режиме редактирования:
  
  
• Вот как она выглядит в режиме исходного кода:
  
  

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

• В этом случае нужно использовать регулярные выражения, поэтому поисковый запрос будет выглядеть следующим образом: 

(<ch:var[^>]+?name=['"])companyName(['"][^>]*?>)

Как вы можете заметить, для правильной работы регулярных выражений необходимо использовать:

• ['"] для указания двойных или одинарных кавычек.
• [^>]+? для поиска пробела.
• [^>]*? для поиска пробела и косой черты.

Кроме того, следует использовать символы ( и ) для объединения совпадающих подвыражений в две группы.

• Чтобы выполнить переименование, заполните поле Заменить на выражением $1NewName$2. 
  
  
• Выберите страницу, на которой хотите заменить переменную, затем нажмите Заменить выбранное (или, при необходимости, нажмите Заменить все).
   
• В результате вы получите новую переменную с тегом NewName.
  

Сценарий №10 — Поиск и замена ссылок на изображения после перемещения изображений в другое место

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

Например, замените:

<img src="Storage/old-folder/image.png"

на следующее:

<img src="Storage/new-folder/image.png"

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

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