Блог разработчика Разработка

html audio play/pause button

Аудио плейер

Track 1
Track 2

Каждый трек вставляется блоком html разметки

<div class="podcast">
  <button class="audio-btn">
    <img class="play-button" src="/img/icons/play.jpg" alt="Play">
    <img class="pause-button" src="/img/icons/pause.jpg" alt="Pause">
  </button>
  <audio src="/files/audio/audio-1.mp3"></audio>
  <div class="podcast-title">Track 1</div>
</div>

CSS стили

.podcast {
  text-align: center;
}
.audio-btn {
  background: none;
  border: none;
  cursor: pointer;
}
.podcast .pause-button {
  display: none;
}
.podcast.play .pause-button {
  display: inline;
}
.podcast.play .play-button {
  display: none;
}

JS скрипт

Для работы скрипта требуется jQuery

(function($){
    $(function(){

      let currentAudio;
      let isPlaying = false;

      $('.audio-btn').click(function(){
        let audio = $(this).parent().find('audio');
        let audioTag = audio[0];

        let btn = $(this);
        
        if (!isPlaying) { // Если ничего не воспроизводится
          audioTag.play();
          currentAudio = audioTag; 
          isPlaying = !isPlaying;
          $(currentAudio).parent().addClass('play');
        }else{ // воспроизводится
          // Если клик по тому треку, который воспроизводится
          if(currentAudio === audioTag) {
            currentAudio.pause();
            isPlaying = !isPlaying;
            $('.podcast').removeClass('play');
          }else {
            // Переключиться на другой трек
            currentAudio.pause();
            audioTag.play();
            currentAudio = audioTag;
            $('.podcast').removeClass('play');
            $(currentAudio).parent().addClass('play');
          }
        }
      });
    });
  })(jQuery);

Чек лист по закуску сайта

Favicon

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

Я добавляю следующие форматы фавиконок на сайт:

<!-- favicon -->
<link rel="icon" href="/favicons/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicons/favicon.ico" type="image/x-icon">
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicons/favicon-192x192.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicons/favicon-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="/favicons/favicon-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/favicon-180x180.png">
<link rel="mask-icon" href="/favicons/favicon.svg" color="#d1d5db">

Мета-теги

Мета-теги помогают поисковым системам представлять описание вашего сайта в результатах выдачи.

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

Мета-тег keywords практически не используется поисковыми системами. Считаетаю, что можно его не указывать.

<title>Заголовок страницы</title>
<meta name="description" content="Краткое описание страницы">
<meta name="keywords" content="Ключевые слова страницы">

Проверка битых сслок

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

Это довольно легко сделать бесплатной программой Xenu.

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

К таким ссылкам лучше добавлять атрибут nofollow, чтобы поисковый робот не пытался по ним переходить.

<a href="tel:+79996665533" rel="nofollow" target="_blank">+79996665533</a>
<a href="mailto:mail@mail.ru" rel="nofollow" target="_blank">Отправить письмо</a>

Подключение аналитики

На этапе разработки аналитика не нужна, но она должна доключаться при публикации сайта. Удостоверьтесь, что вы подключили счетчики Яндекс Метрики и Google Analytics.

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

Sitemap

Добавьте sitemap.xml и отправьте этот файл на индексацию через личный кабинет соответствующей поисковой системы. Например, в Яндекс Вебмастер или в Google Search Console.

eslint specify a path to the eslint package

Возможно, вы сталкивались с такой проблемой в PhpStorm при установке Линтера

eslint specify a path to the eslint package

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

  1. Установите esLint глбоально, запустив в консоли команду 
    npm install --g eslint
  2. Убедитесь, что в настройках phpStorm включено Automatic ES Lint Configuration
  3. Перезагрузите phpStorm

После этих манипуляций ошибка должна исчезнуть

gulp-sass no longer has a default Sass compiler

С недавнего времени у тех, кто использует gulp-sass стало появляться следующая ошибка:

Error in plugin "gulp-sass"
Message:

gulp-sass no longer has a default Sass compiler; please set one yourself.
Both the "sass" and "node-sass" packages are permitted.
For example, in your gulpfile:

  const sass = require('gulp-sass')(require('sass'));

[10:27:06] The following tasks did not complete: default, styles
[10:27:06] Did you forget to signal async completion?

Process finished with exit code 1

Это связано с тем, что gulp-sass не имеет sass компилятора по умолчанию. Чтобы решить проблему, нужно сделать следующие шаги:

  1. Установить sass пакет: 
    npm i sass
  2. Добавить этот пакет в gulpfile.js: 
    sass = require('gulp-sass')(require('sass'));

Если после этого вы видите ошибки связанные с fs или graceful-fs, вероятно у вас gulp 3, нужно обноваить до 4 версии.

Инструкцию можете прочесть тут: Как обновить Gulp до версии 4

Если возникает следующая ошибка после установки Gulp 4

return Object.keys(tasks) TypeError: Cannot convert undefined or null to object

Если вы используете phpStorm, то, возможно, вам потребуется изменить путь до актуального пакета Gulp.

Настройки Gulp в phpStorm Настройки Gulp в phpStorm

Лучшие CSS фреймворки в 2024 году

Ищете лучшие CSS фреймворки в 2024 году? 🧐 Здесь представлен рейтинг CSS-фреймворков, чтобы вы могли получить подробный обзор различных CSS-фреймворков сразу...!!!

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

Навигация по странице: TailiwndCSS

Зачем использовать CSS-фреймворки?

Кроме того, они удобны для использования в распространенных ситуациях, таких как настройка навигационных панелей. Часто расширяются другими технологиями, такими как SASS и JavaScript. Главное преимущество правильного CSS-фреймворка в том, что он экономит ваше время, поскольку вам не нужно писать стили с нуля.

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

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

Лучшие CSS-фреймворки в 2024 году

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

1. Tailwind CSS: Низкоуровневый фреймворк, ориентированный на утилиты

tailwind

Tailwind CSS - это гибко настраиваемый низкоуровневый CSS-фреймворк, который предоставляет вам все необходимые строительные блоки для создания индивидуального дизайна без раздражающих стилей. В отличие от других CSS-фреймворков (Bootstrap или Materialize CSS), он не работает с предопределенными компонентами. Вместо этого он работает на более низком уровне и предлагает вам набор вспомогательных классов CSS. Используя эти классы, вы можете быстро и легко создавать пользовательский интерфейс. Tailwind CSS позволяет вам создать свой собственный уникальный дизайн.

Вы можете посетить страницу Tailwind на Github.

Причины использовать Tailwind:

Статистика tailwind

Дополнительная информация:

2. Bootstrap: самый популярный в мире фреймворк

Bootstrap 5

Bootstrap - это лучший в мире CSS-фреймворк с большой поддержкой сообщества, разработанный командой Twitter. Этот фреймворк построен на HTML, SASS и JavaScript. В настоящее время Bootstrap 5 обладает большей отзывчивостью благодаря полезным классам и новым компонентам. Он направлена мобильную разработку фронт-энда, что делает его пригодным для использования на любом устройстве и удобным для разработчиков. Bootstrap поддерживает все современные браузеры. Лучшим преимуществом Bootstrap является то, что этот фреймворк имеет отличные компоненты JavaScript с пользовательскими файлами или CDN.

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

Особенности:

Причины использовать Bootstrap:

Bootstrap основан на лицензии MIT License, поэтому его можно свободно использовать, распространять, а также вносить свой вклад в сообщество.

Страница Bootstrap на Github насчитывает более 19 000 коммитов и 2000 участников.

Bootstrap 5 stats

Дополнительная информация:

Идеально подходит для:

3. Materialize CSS: Material Design Based CSS Framework

Materialize CSS

Materialize CSS - это отзывчивый CSS фреймворк с коллекциями UI-компонентов с минимальными эффектами, разработанный компанией Google. Основан на идее схожести ui компонентов с физическими объектами. Materialize полностью адаптивен на планшетах и мобильных устройствах. Он прост в освоении, а также имеет отличную документацию. Этот фреймворк имеет большую поддержку сообщества и множество положительных отзывов. Materialize CSS позволяет настраивать параметры с помощью впечатляющего набора цветовых коллекций.

Причины использовать Materialize CSS:

Materialize CSS

Дополнительная информация:

4. Material Design Lite: Легкий фреймворк, основанный на Material Design

Materialize CSS

Material Design Lite - это библиотека компонентов пользовательского интерфейса, созданная с помощью CSS, HTML и JavaScript. Она позволяет придать вашим веб-сайтам вид и ощущение Material Design. Кроме того, она не зависит от каких-либо JavaScript-фреймворков и нацелена на оптимизацию использования на разных устройствах, изящную деградацию в старых браузерах, а также на обеспечение доступности. Вы можете использовать эти компоненты для создания привлекательных и функциональных веб-страниц. Страницы, разработанные с помощью MDL, будут поддерживать все современные принципы веб-дизайна, такие как поддержка в браузере, плавная деградация и адаптивность.

Библиотека компонентов MDL предлагает новые версии распространенных элементов управления пользовательского интерфейса, таких как кнопки, текстовые поля и чекбоксы, которые соответствуют концепциям Material Design. Библиотека также включает расширенные и специализированные функции, такие как карточки, спиннеры, макеты колонок, слайдеры, типографика, вкладки и многое другое. MDL бесплатна для загрузки и использования, и может использоваться как с любой библиотекой или средой разработки, так и без них. Это кросс-браузерный и кросс-ОС набор инструментов для веб-разработчиков.

Вы можете ознакомиться с Material Design Lite на Github.

Причины использовать Material Design Lite:

Material design lite

Дополнительная информация:

5. Bulma: Бесплатная CSS-фреймворк с открытым исходным кодом

Bulma

Bulma - это отзывчивый современный CSS фреймворк. В него встроены HTML, SASS и CSS flexbox. Bulma предоставляет множество возможностей для настройки в соответствии с вашими требованиями с помощью sass-файлов, веб-пакетов и переменных. Bulma создан на чистом CSS, что означает, что при использовании фреймворка вам понадобится только один .css файл и никаких .js.

Этот фреймворк имеет несколько продвинутых функций, которые помогут вам сделать ваш сайт более привлекательным при меньшем количестве кода. Вы можете использовать функции утилиты для создания темных и светлых цветов. Она имеет те же сетки, что и bootstrap. Bulma позволяет добавить модульность SASS. Она совместима с Font Awesome 4 и Font Awesome 5 благодаря элементу .icon.

Причины использовать Bulma:

Bulma

Дополнительная информация:

6. Foundation: Самый продвинутый Front-end Framework

Foundation

Foundation - это продвинутый CSS фреймворк, построенный на HTML, CSS, SASS и javascript. Этот фреймворк имеет компилятор sass с более быстрым способом разработки веб-сайта. Foundation имеет свой собственный CLI для установки. Похожая файловая структура, как у Bootstrap, Bulma и Materialize CSS. Это CSS-фреймворк с mobile-first подходом, с полностью адаптивными компонентами.

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

Причины использовать Foundation:

Foundation

Дополнительная информация:
Идеально подходит для:

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

7. Skeleton: Чрезвычайно легкий фреймворк для базовых элементов пользовательского интерфейса

Skeleton

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

Вы можете посетить страницу Скелетона на Github.

Пичины использовать Skelton:

skeleton

Дополнительная информации:

8. Semantic UI CSS framework: Расширяет возможности дизайнеров и разработчиков, создавая общую лексику для пользовательского интерфейса.

Semantic UI

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

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

Вы можете ознакомиться со страницей Semantic на Github.

Причины использовать Semantic UI:

Semantic UI предлагает очень хорошо организованную документацию. Более того, у фреймворка есть отдельный веб-сайт с руководствами по началу работы, настройке и созданию тем.

Все классы Semantic UI являются привычными словами, и кодирование напоминает написание обычного текста. Такой дружественный подход облегчает восприятие и понимание фреймворка даже для новичков.

Semantic UI

Дополнительная информация:

9. Pure CSS: Набор небольших, отзывчивых CSS-модулей.

Pure CSS

Pure - это набор небольших, отзывчивых CSS-модулей. Размер Pure невероятно мал - всего 3,8 КБ в минифицированном виде. Кроме того, если вы решите использовать только подмножество доступных модулей, вы сэкономите еще больше трафика. Построенный на основе Normalize.css, Pure обеспечивает верстку и стилизацию для собственных элементов HTML, а также наиболее распространенных компонентов пользовательского интерфейса. Его минимальные стили помогают вам писать стили приложений поверх него.

Вы можете ознакомиться со страницей Pure CSS на Github.

Причины использовать Pure CSS:

Pure CSS

Дополнительная информация:

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

10. UI kit: Легкий и модульный front-end фреймворк

UI kit

UI Kit - это легкий модульный CSS-фреймворк для разработки веб-интерфейсов. Основное отличие в большом наборе ui компонентов. UI kit имеет множество предварительно созданных компонентов, таких как Accordion, Alert, Dropdown, Iconnav, а также анимации и т.п.

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

Причины использовать UI Kit:

UI Kit

Дополнительная информация:

Итоги

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

Вот некоторые параметры, которые вы должны учитывать при выборе подходящего CSS-фреймворка:

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

Поделитесь этим списком со своими коллегами, друзьями и в социальных сетях, как только сможете, с указанием авторства. Потому что делиться - значит заботиться...!!! Верно? 😇

Мы уверены, что после просмотра этого списка лучших CSS Frameworks 2024 вы сможете выбрать подходящий в соответствии с вашими требованиями.

ИСТОЧНИКИ:

Как использовать CSS переменные в Sass

Сначала простой ответ, ниже обсуждаем варианты.

Сразу нужно отметить, что нужно ставить экранирующий слеш перед селектором \:root
@function color($color-name)
  @return var(--color-#{$color-name})

\:root
  --color-gray-600: rgb(75, 85, 99)

p, span
  color: color(gray-600)

На выходе из этого получится такой CSS код:

:root {
  --color-gray-600: rgb(75, 85, 99);
}

p, span {
  color: var(--color-gray-600); 
}

Постановка задачи

Зачем же понадобилось использовать CSS переменные, если мы можем объявлять переменные в самом sass?

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

А еще они могут быть ограничены элементом, на котором они объявлены, что приближает нас к компонентному подходу.

Сложности использования CSS переменных в Sass

Если вы хотите сделать как в примере ниже, то ничего не выйдет, потому что переменная $gray-50 не подставится.

$gray-50: rgb(249, 250, 251)

\:root
  --color-gray-50: $gray-50

p, span
  color: var(--color-gray-50)

Но можно собрать это с помощью map и each, предварительно определив переменные:

$colors: () !default
$colors: map-merge( ( "white": $white, "gray-600": $gray-600, "gray-800": $gray-800 ), $colors )

\:root
  @each $color, $value in $colors
    --#{$color}: #{$value}

На выходе получим что-то подобное:

:root {
  --white: white;
  --gray-600: #4b5563;
  --gray-800: #1f2937; }

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

И нет причин оборачивать CSS свойство в еще одну абстракцию в виде SASS переменной. Если только вы не хотите производить какие-то математические операции с цветами, которые доступны в Sass.

Переключение между SSH ключами в GitHub

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

ERROR: Repository not found.
fatal: Could not read from remote repository.

Самые распространенные причины - ключи не добавлены в аккаунт GitHub или неправильно настроены на локальном компьютере. Но я столкнулся с другой ситуацией, и алгоритм решения не был описан в интернете.

У меня было несколько ключей для доступа к разным репоизториям. Как переключаться между SSH ключами?

Если вы не уверены, что у вас установлены SSH ключи, посмотрите эту статью: Настройка SSH ключей для Github

Смена SSH ключей в GitHub

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

  1. Выведем логи подключения, чтобы убедиться что само подключение выполняется корректно 
    ssh -v git@github.com
  2. Нужно будет ввести кодовую фразу
  3. Если есть вот такой ответ, значит подключение удалось, но ключ не подошел 
    You've successfully authenticated, but GitHub does not provide shell access
  4. Нужно прописать путь до ваших ключей, например 
    ssh-add ~/.ssh/my-key/mykey
  5. Если вы видите ошибку 
    Could not open a connection to your authentication agent.
  6. Нужно запустить SSH агент 
    eval "$(ssh-agent -s)"
  7. В ответ получите (число может быть любое, это не важно)
    Agent pid 1111
  8. Снова повторяем 
    ssh-add ~/.ssh/my-key/mykey
  9. Вводим фразу и видим 
    Identy added: ... (your@mail.com)

Выбрать SSH ключи по умолчанию

Ключ по умолчанию указан в файле ~/.ssh/config в значении IdentityFile

Host *
IdentityFile ~/.ssh/название_ключа

Автозапуск ssh-agent при открытии консоли

Ключи будут выбираться автоматически и запрашивать passphrase, для этого нужно в файле ~/.bash_profile указать:

if [ -z "$SSH_AUTH_SOCK" ] ; then
  eval `ssh-agent -s`
  ssh-add ~/.ssh/название_ключа
fi

Настройка SSH ключей для Github

Рассказываем как добавить SSH ключи для Github

Чтобы была доступна команда git из коммандной строки, нужно установить Git с оф сайта git-scm.com. Вместе с ним установится git bash.

Нужно настроить доступ по SSH к репозиторию. Для этого нужно сгенерировать ключи.

Чтобы проверить установлены ли ключи, в git bash воспользуйтесь командой ls -al ~/.ssh

Если в ответ получите No such file or directory, значит нужно создать ключи.

Создание SSH ключей для GitHub

$ ssh-keygen -t ed25519 -C "your_email@example.com"

Нужно будет ввести фразу пароль

$ eval "$(ssh-agent -s)"

Возвратит что-то типа 

Agent pid 1232

Дальше добавляем ключи в ssh-агент, он потребует ввести фразу пароль:

$ ssh-add ~/.ssh/id_ed25519

Копируем в буфер ключ

$ clip < ~/.ssh/id_ed25519.pub

Вставляем их в аккаунт на Гитхабе. Settings - SSH and GPG keys

Что нового в Bootstrap 5

Зависимости

Прекращение поддержки браузеров

Сетка

Контент

Формы

Accordion

Добавлен новый компонент

Alerts

В примерах теперь используются иконки

Badges

Хлебные крошки

Кнопки

Card

Слайдеры (Carousel)

Шпаргалка по регулярным выражениям

Многие пользовались поиском файлов в своей операционной системе. Например, "*.txt", где * это любая последовательность символов, а ? - это один произвольный символ. Так вот. Это не регулярные выражения. Подобные выражения называются файловыми глобами или Групповыми символами (wildcards).

Дальше про регулярные выражения

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

Начало и конец строки

Под строкой подразумевается не переменная с типом string, а любой текст в его начале и после символа переноса строки. Аналогично конец строки.

Специфика заключается в том, что они совпадают с определенной позицией в строке, а не с символами текста.

Выражение ^$ совпадет с пустой строкой.

Символьный класс [...]

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

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

Выражение [e] - совпадает с буквой "е", а выражение [ea] - совпадет с любой из этих букв.

Дефис внутри символьного класса

Внутри символьного класса дефис - это интервал. Например, [0123456789] = [0-9]

Выбрать все html-теги заголовков можно конструкцией <H[1-6]>.

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

Инвертированный символьный класс

[^..] - класс совпадет с любыми символами, не входящими в него. Внутри символьного класса "^" имеет уже другой смысл.

[^1-6] - совпадет с любыми символами не принадлежащими интервалу 1-6.

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

| - означает "или". Например, Bob|Robert. Используется как метасимвол вне символьного класса. То есть внутри [|] он будет воспринят буквально, как поиск вертикальной черты.

Подвыражения, объединенные таким способом называются альтернативами.

Конструкцию выбора можно отделять от остального выражения круглыми скобками, то есть gray|grey = gr(a|e)y.

Экранирование

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

Другими словами - экранированный метасимвол становится литералом. Например поиск скобок в тексте должен выглядеть так \( и \).

Аналогично слеш превращает некоторые литералы в метасимволы. Например, \t - знак табуляции.

Метасимволы и квантификаторы

Квантификаторы определяют количество экземпляров элемента после которого стоят.

МетасимволОбозначениеПример
. (точка)заменяет любой символ (кроме переноса строки)
? (знак вопроса)предшествующий ему символ является не обязательным(July|Jul) = (July?)
+ (плюс)предшествующий символ встречается один или несколько раз
* (звездочка)предш. символ встречается любое количество раз, в том числе 0 раз
{min, max}количество совпадений от min до max[a-zA-Zа-яА-Я]{3,12} - букв должно быть не менее 3, но и не более 12
{0,1}Эквивалентно метасимволу ?
{1,}Эквивалентно метасимволу +
{0,}Эквивалентно метасимволу *
( ) круглые скобкиПрименяются для группировки, сохранения совпавшего текста или ограничения конструкций выбора
\tТабуляция
\nПеренос строки
\rВозврат каретки
\sЛюбой пропуск.
Объединяет в себе пробелы, табуляции, перенос строки, возврат каретки
\SВсе, что не относится к \s
\bГраница слова.
После него должны следовать словесные символы и тогда это начало слова.
Либо перед ним должны стоять словесные символы и тогда это конец слова.
\wЛюбая цифра, буква или знак подчеркивания[a-zA-Zа-яА-Я0-9_]
\WВсе, что не относится к \w
\dЦифры[0-9]
\Dвсе, что не относится к \d[^0-9]

Обратные ссылки

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

Например, нам нужно найти повторяющееся слово в тектсе. \b([a-zA-Z]+) \1 - здесь метасимвол \1 будет ссылкой на подвыражение в скобках. Сначала мы ищем начало слова, за ним будут следовать одна или несколько букв, затем пробел и потом эта же последовательность букв.

Кажой паре скобок будет соответствовать номер \1 \2 \3 ....

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

Несохраняющие круглые скобки

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

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

Для этого существует конструкция (?: ). Это обеспечивает группировку без сохранения. То есть этим скобкам не будет присвоен номер.