Запросить демо
Запросить демо
Документерра: руководство пользователя

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

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

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

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

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

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

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

Название компании в редакторе страниц

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

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

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

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

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

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

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

HTML
<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*?   до и после открывающих и закрывающих тегов. Для нашей инструкции поисковый запрос будет выглядеть так:

HTML
<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*? перед каждым открывающим и закрывающим тегом. 

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

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

  • Используйте поисковый запрос в качестве строки поиска.
  • Установите соответствующие галочки фильтра — Регулярное выражение и Страницы (заголовок и исходный код) обязательны.
  • Нажмите Найти все.
  • Выберите все страницы, кроме той, которую вы только что создали в качестве сниппета (иначе ее код также будет заменен).
  • Заполните поле Заменить на ссылкой на сниппет. Вот пример того, как это будет выглядеть:
    HTML
    <ch:snippet url="/articles/project-making-robots/istruction"/>

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

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

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

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

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

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

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

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

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

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

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

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

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

Разметка контента страницы, которую необходимо удалить

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

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

Разметка контента страницы, которую необходимо найти
А это на другой странице (текст навигационной ссылки другой):
Разметка контента страницы, которую необходимо найти
Вы можете сопоставить обе версии, используя что-то общее, например:

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

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

HTML
<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-стилях. Мы будем использовать следующее регулярное выражение:

CSS
\.myClass\b

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

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

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

  • Затем следует сопоставить начало тега и его атрибут class с другими возможными классами, которые находятся перед нужным классом. Он будет в группе, которую мы не должны удалять/редактировать. Затем мы подбираем класс, который будет окружен границами слов. В квадратных скобках мы используем одинарную кавычку или двойные кавычки. Выражение типа [^'"]  означает найти все символы, кроме одинарных или двойных кавычек, чтобы не выходить за рамки атрибута класса. 
  • Заполните поле Заменить на выражением $1myNewClass. Затем продолжайте выполнять шаги.
  • Так, например, для следующей части:
    CSS
    <div class="firstClass myClass otherClass">

  • Результат будет следующим:
    CSS
    <div class="firstClass myNewClass otherClass">

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

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

Условный тег, который необходимо найти

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

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

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

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

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

После операции замены мы получим следующий результат:

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

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

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

Выпадающий список фильтров в диалоговом окне Глобального поиска и замены

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

Заполните строку поиска в диалоговом окне Глобального поиска и замены

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

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

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


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

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

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

Как вы можете заметить, вам нужно использовать ['"] для двойных или одинарных кавычек, [^>] +? для пробела, а [^>]*? для пробела и косой черты.   Кроме того, необходимо использовать символы ( и ) для объединения совпадающих подвыражений в две группы.

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

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

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

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

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

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

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

Замените URL-адрес изображения в диалоговом окне Глобального поиска и замены

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

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