Регулярные выражения в практике дизайнера. inDesign, JavaScript.

Большинство задач дизайнера так или иначе связаны с текстом. Потеребить типографику, создать многоколоночную верстку, позалипать на шрифты паратайпа, тайком от коллег использовать Lobster в баннере. Но у текста есть ещё одна, очень важная сторона, и отнюдь не эстетическая: разбор и глобальное редактирование больших объемов текста.

А зачем? Допустим, дизайнеру даются текстовые данные для внесения в 40 000 визиток. Редкий клиент даст оптимизированный текст, а так как работу надо сделать, придется полученные данные обрабатывать самостоятельно. Вот тут то и придут на выручку регулярные выражения. Основная и наиболее примитивная задача регулярных выражений — умный поиск текста. InDesign поддерживает регулярные выражения с версии CS3, а в скриптах под InDesign с версии CS2 через библиотеку Microsoft VBScript Regular Expressions vbscript.dll. В данной статье рассматривается синтаксис PCRE.

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

Синтаксис, метасимволы:

\ превращает спец. символы в обычные и наоборот. Пример: /d/ ищет просто букву d. /a\*/ ищет a*. Так, \\ это просто слеш, а \\\\ это два слеша. Каждые два слеша преобразовываются в один, когда идет преобразование в обычный символ.

/ начало и конец рег. выражения из литералов в JS

. любой символ кроме перевода строки (на точку тоже работает). [A-Z].. выберет текст начиная с заглавной буквы и плюс два любых символа.

* повторение предыдущего символа в количестве ноль и более раз, a*b*c* (aabbbccc), /kia*/ найдет ‘kiaaaaaaaaaaaaaaaa’

+ повторение предыдущего символа 1 и более раз

? опциональный символ. Повторение символа ноль или один раз, то есть в [mo?ther] не будет важно, есть ли в слове буква o или нет, в обоих случаях слово будет выбрано.

\d любая цифра. Эквивалентно [0-9].

\w любой словесный символ (буквы, цифры и _). Эквивалентно /[A-Za-z0-9_] /.

[] любой символ из указанных внутри конструкции. [d] найдёт все буковки d. /[A-Z]/   все большие английские буквы. /x[eaoy]n/ выберет Xen xan xon xyn. [XYZ]+ один или более символов из указанных в конструкции. [^xyz] любой символ кроме указанных в наборе. [Mm]a[ks]|[x]|[xs]im – выберет любое из имен maxsim, maksim, masim, Maxim, Maksim, maxim .

$ конец данных. /a$/ найдёт слово anna, но не найдёт ann. /^[0-9]+\.00$/ проверит, есть ли нули в конце или нет.

^ начало данных. ^man будет верным, если строка начинается с непрерывного набора букв m a n. А [^a-z] не строчная буква ^.  /[^b]log/ выберет plog dlog flog но не blog, а ma[ksx]im

\s –найти все символы пробела

() отделяющие скобки, или группировка. (\d+).(\d+) – выбрать такого типа данные 1024, 768. (file.*)\.pdf$ -имя файл, потом любое кол-во символов, точка и формат. (?:<img.*?\/?>) найти изображение в тексте.

| или. I love (cats|dogs) – или или

{m,n} от m до n повторений предыдущего символа. Неотъемлемая часть валидации всяких логинов и паролей, вроде /^[\w_]{8,22}$/

\< и \>  позиция в начале и конце слова соответственно.

Есть дополнительные опции. А точнее, флаги. Лично мне они знакомы по языку MEL, т.к. очень активно в нем используются. G – глобальный поиск, заставит рег. выражения пройтись по всему контенту, i позволяет забыть про регистр, m – многострочный поиск. Если введенный текст при поиске не соответствует ни одному из метасимволов, то он считается обычным текстом.

Существуют кванторы, они позволяют задать количество повторений для стоящего слева от них символа.
* 0 повторений или более раз
+ 1 или более раз
? 0 или 1 раз
{x} точное количество раз (x)
{x,y} от x до y раз

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

Допустим, вот пример для телефонного номера: (\+7|8)[-\s(]*?(\d{3})[-\s)]*?(\d{3})[\s-]?(\d{2})[\s-]?(\d{2}), а вот пример RegExp для гос.знака автомобиля (\\p{L}\\p{N}{3}\\p{L}{2}|\\p{L}{2}\\p{N}{3}\\p{L})(\\p{N}{2}|\\p{N}{3})$"
Преобразованное в ‘автомат’ регулярное выражение телефонного номера.

«Это все замечательно, но мне нужно готовое решение!» — скажите вы. И правильно скажете, регулярные выражения сложно читать, писать и поддерживать. Но зачастую это единственный способ выполнить сложные манипуляции над текстом. В InDesign использовать регулярные выражения можно через Edit > Find/Change (Поиск и замена) в закладка GREP(регулярные выражения). Все просто, в верхнюю строчку вводите регулярное выражение, в нижнюю $0 (доступ ко всему найденному), и в опциях замены укажите необходимые настройки. Собственно, профит.

1

Вот пример с более сложной структурой:

pass

У разных языков программирования разные диалекты регулярных выражений. Perl и PHP позволяют использовать рекурсивные регулярные выражения, флаги тоже не везде работают одинаково. Поэтому обязательно смотрите документацию. Посмотрим работу с регулярными выражениями на примере JavaScript.
Задаем переменную:

const myrg = new RegExp('car')
const myrg = /car/

Изучаем методы:
Test – проверяет, есть ли совпадения в выделенной строке;
Exec – поиск совпадений в строке и возвращаем массив в данными;
Sear– тестирует на совпадение в строке;
Matc – поиск совпадений и возврат массива данных;
Repl – поиск совпадений и замена на что либо;
Split – разбивает строки на массив подстрок;

Используем на чем либо живом. Составим вот такой вот простой скриптик, который уберет слова cat.

var reg = /\b(?!cat\b)\w+/g;
var strin = "my cat, you cat, world cat!";
myArray = strin.match(reg);
document.write(myArray);

В синтаксисе JS и RegExp есть пересечение по использованию следующих символов: \ / [ ] ( ) { } ? + * | . ^ $. Если они используются для поиска совпадений в шаблоне, то нужно их экранировать с помощью символа обратного слэша.

И самое приятное, регулярные выражения работают и в Google Analytics, Google Tag Manager и Яндекс Метрике. При настройках цели, при настройках расширенного фильтра в отчете, при создании пользовательских сегментов, при создании фильтров в представлении, и даже при использовании фильтров в запросах по API Google Analytics.

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

4 комментария

  1. Konstantin Shirshov

    Привет! Как делать такой пробел, который переносит местоимение вместе со словом? Спасибо!

    • your-scorpion (Author)

      Называется неразрывный пробел. Написать его просто, достаточно нажать option + shift + пробел.

      • смагли_89

        О, а расскажите поподробнее про такие пробелы, как из сделать?

        • Цветков Максим (Author)

          Существует много пробелов, для контроля внешнего вида и поведения текста обычного пробела не достаточно. Например, есть стандартная ошибка многих арт-директоров, они думают что длинное тире не нужно отделять пробелами. На самом деле оно отделяется очень узкими пробелами или пробелами без ширины, это необходимо для переноса слов на следующую строчку. Да и стандартное замечание «изменить расстояние на волосок» строится не на абстрактном чувстве прекрасного, а на вполне определенном пробеле Hair space.

          Для решения проблемы с висящими строками используются неразрывные пробелы, всего их три: Narrow no-break space, No-break space и Figure space. А брать эти самые пробелы можно напряму из unicode, или скопировать с текста ниже.

          Hair space \u200A — волосок
          Six-per-em space \u2006 — 1/6 кегля
          Thin space \u2009 — примерно 1/6 кегля
          Normal space \u0020 — space на клавиатуре
          Four-per-em space \u2005 — 1/4 кегля
          Mathematical space \u205F — 4/18 кегля, для формул
          Punctuation space \u2008 — ширина точки
          Three-per-em space \u2004 — 1/3 кегля, обычный пробел
          En space \u2002 — половина кегля
          Ideographic space \u3000 — для восточных языков
          Em space \u2003 — ширина с кегль
          Narrow no-break space \u202F — примерно 1/5 кегля
          No-break space \u00A0 — ширина обычного пробела
          Figure space \u2007 — шириной с цифру
          Zero​width​​space \u200B

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

          В Unicode можно найти еще много интересного.

«Взаимодействуя с данным сайтом, вы, как пользователь, автоматически даете согласие согласие на обработку персональных данных» Согласие

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