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

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

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

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

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

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

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

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

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

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

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

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

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

Вот как выглядит разметка инструкции:

<p>To build a robot, follow the instruction:</p>
<ul>
    <li>put together the robot's bits and pieces</li>
    <li>use the oil to help the pieces move</li>
    <li>use the control panel to program what to do.</li>
</ul>

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

<p>\s*?To build a robot, follow the instruction:\s*?</p>\s*?<ul>\s*?<li>\s*?put together the robot's bits and pieces\s*?</li>\s*?<li>\s*?use the oil to help the pieces move\s*?</li>\s*?<li>\s*?use the control panel to program what to do\.\s*?</li>\s*?</ul>

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

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

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

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

  Copy Code HTML

  <ch:snippet url="/articles/project-making-robots/istruction"/>

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

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

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

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

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

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

<div[^>]*?id="pnlHeader"[^>]*?>\s*?Created by a third-party tool\s*?</div>

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

<div[^>]*?class="header"[^>]*?>\s*?Created by a third-party tool\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 — Очистка верхних и нижних колонтитулов с неизвестной структурой тегов 

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

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

  Copy Code 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. Затем продолжайте выполнять шаги.
• Так, например, для следующей части:
  

  Copy Code CSS

  <div class="firstClass myClass otherClass">

  
  
• Результат будет следующим:
  

  Copy Code 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, что является наиболее распространенным сценарием.

Наверх