Регулярные выражения

Атрибут pattern

<input type="text" pattern="\D+" title="любые символы кроме чисел">

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

Однако, не всегда можно коротко описать регулярное выражение, поэтому при использовании pattern стоит придерживаться максимально простых правил, подсказку для которых можно дополнительно описать с помощью атрибутов title и placeholder.

<input type="text" name="passport" placeholder="00 00 №000000" pattern="\d{2}\s*\d{2}\s*№?\d{6}">

Методы JavaScript для работы с регулярными выражениями

'Ехали  медведи на   велосипеде'.split(/\s+/); // ['Ехали', 'медведи', 'на', 'велосипеде']

'Florence__+__The_Machine_-_Spectrum'.replace(/_+/g, ' '); // Florence + The Machine - Spectrum

'Потому что ты медведь...'.search(/медведь/); // 14

/-/.test('Жизнь - туман!'); // true

Справочник

const regex = /выражение/модификатор;

const regex = new RegExp('выражение', 'модификатор');

Примеры

Валидируем хэштеги

const inputHashtag = document.querySelector('#hashtags');

const errorMessage = `Неверный формат хэштегов`;

const onHashtagInput = (evt) => {
  evt.target.setCustomValidity(/^\s*(?:(#[a-zа-яё0-9]{1,19})(?:\s+(?!.*?\1\s?)|$)?){1,5}$/i.test(evt.target.value) ? '' : errorMessage);
  evt.target.reportValidity();
};

inputHashtag.addEventListener('input', onHashtagInput);

• Регулярное выражение задействует всю строку от начала ^ и до конца $.
• Перед хэштегами могут быть, а могут не быть пробельные символы \s*.
• Первые скобки, не сохраняющие (?:), нужны для обобщения хэштега с пробельными символами \s+ и концом строки, а также для проверки количества хэштегов 5.
• Первые сохраняющие скобки (#[a-zа-яё0-9]19) проверяют написание хэштега, наличие # и длину 20 знаков.
• Следующие за ними не сохраняющие скобки (?:\s+(?!.?\1\s?)|$) являются условием, где сначала проверяется наличие пробелов после хэштега и выполняется опережающая проверка на совпадение с сохранённым состоянием первых скобок (?!.?\1\s?) или с концом строки $.
• Так как регулярное выражение использует нечувствительный к регистру модификатор i, то и сохранённые состояния тоже не чувствительны к регистру, любые хэштеги #a и #A будут считаться не валидными.

ФИО

У нас есть поле с фамилией, именем и отчеством на русском языке. Давайте допишем паттерн, который предотвратит отправку на сервер недопустимых символов, а затем проверим, все ли три части ФИО присутствуют в строке, а если нет, выведем сообщение «Неверный формат данных».

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

<input type="text" name="full_name" placeholder="фамилия имя отчество" pattern="[-а-яёА-ЯЁ ]+">

const MAX_PARTS = 3;
const inputElement = document.querySelector('input[name=full_name]');

const parts = inputElement.value.split(/\s+/, MAX_PARTS);

inputElement.addEventListener('input', () => {
  inputElement.setCustomValidity('');

  const parts = inputElement.value.split(/\s+/, MAX_PARTS);

  if (parts.length < MAX_PARTS) {
    inputElement.setCustomValidity('Неверный формат данных');
  }
});

Валидация идентификаторов тегов

const elements = document.querySelectorAll('*');

elements.forEach((element) => {
  if (element.id !== '' && /^[^a-zA-Z]/.test(element.id)) {
    alert(`Elements id="${element.id}" is wrong!`);
  }
});

:)))) -> :)

const comments = [
  {
    name: `Вера`,
    comment: `Фильм укатайка :)))))))))))))))))))`
  },
  {
    name: `Даниил`,
    comment: `Были смешные моменты :), но в целом такое...`
  },
  {
    name: `DarkLord`,
    comment: `:)))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))`
  }
];

comments.forEach((item, i) => {
  item.comment = item.comment.replace(/:\)+/g, ':)');
});

console.log(comments);

trimChars

const trimChars = (str, chars = '\\s') => {
  if (!str) {
    return str;
  }

  return str.replace(new RegExp(`^[${chars}]+|[${chars}]+$`, 'g'), '');
};

console.log(trimChars('"Однажды, в студёную зимнюю пору..."', '"')); // Однажды, в студёную зимнюю пору...

console.log(trimChars('**_Роднит людей космическая сопричастность_**', '*_')); // Роднит людей космическая сопричастность

console.log(trimChars('  Привет! ')); // Привет!