Web
0
37139

5 практических примеров использования регулярных выражений на JavaScript

Regex или регулярные выражения пугают новичков, но необходимы любому программисту. Давайте разберемся в регулярных выражениях на 5 простых примерах с JavaScript.

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

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

Совпадающие символы

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

1. Точка ( . ) соответствует любому символу. Если нужно искать именно точку, ее необходимо экранировать с помощью символа «\» ( \. ).

2. Знак вопроса ( ? ) означает, что предыдущий символ является необязательным. Чтобы искать сам знак вопроса в строке, его также необходимо экранировать с помощью «\» ( \? ).

var text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit lest. Donec convallis dignissim ligula, et rutrum est elat vistibulum eu.';

// Подойдут оба и "elit", и "elat". Точка означает, что подойдет любой символ.

var regex = /el.t/g;

console.log( text.match(regex) );


// "est" и "lest" одинаково подойдут. Знак вопроса делает "l" необязательной.

var regex2 = /l?est/g;

console.log( text.match(regex2) );

Совпадение множества символов

Множество – это один или несколько символов, заключенных в скобки, например [abc]. Такое выражение будет искать в строке только этот набор символов – в данном примере только a, b или c. Можно наоборот, искать вхождения любых символов, кроме [abc] с помощью символа «^». [^ abc] будет соответствовать любому символу, который не является a, b или c. Также можно указать диапазон символов или чисел, например [0-9], [a-z].

Существуют встроенные наборы символов, упрощающие запись регулярных выражений. Их называют сокращениями или shorthand. К примеру, вместо [0-9] можно написать \D. Есть сокращения и для остальных символов (включая цифры и знак подчеркивания) – \w и \W, а также для пробелов – \s и \S.

// Подойдут только "cat" и "can", но не "car".

var text = 'cat car can';

console.log( text.match(/ca[tn]/g) );

// Пройдет все, кроме cat и can (присутствует символ ^ )

console.log( text.match(/ca[^tn]/g) );


// Еще один пример, где пройдут только цифры

text = 'I would like 8 cups of coffee, please.';


console.log('How many cups: ' + text.match( /[0-9]/g ));

// Более простой способ с помощью сокращения \d

console.log('How many cups: ' + text.match( /\d/g ));


// Пройдет все, кроме цифр

console.log( text.match(/\D/g) );

Совпадающие слова

В большинстве случаев вам нужно искать целые слова, а не отдельные символы. Это делается с помощью модификаторов ( + ) и ( - ), которые повторяют символ или набор символов.

Добавление {X} задает точное количество повторений, {x, y} – диапазон (x и y - числа).

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

Примеры:

var text = 'Hello people of 1974. I come from the future. In 2014 we have laser guns, hover boards and live on the moon!';

// Найдет годы. \d+ найдет один и более знаков

var yearRegex = /\d+/g;

console.log('Years: ', text.match( yearRegex ) );


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

var sentenceRegex = /[A-Z].+?(\.|!)/g;

console.log('Sentences: ', text.match(sentenceRegex) );


// Найдет все слова, начинающиеся на "h". Нам подойдут и заглавные и строчные, так что используем модификатор i
// \b для определения границы слов.

var hWords = /\bh\w+/ig;

console.log('H Words: ', text.match(hWords) );


// Найдет все слова от 4 до 6 символов

var findWords = /\b\w{4,6}\b/g;

console.log( 'Words between 4 and 6 chars: ', text.match(findWords) );


// Найдет слова длиннее 5 символов

console.log( 'Words 5 chars or longer: ', text.match(/\b\w{5,}\b/g) );


// Найдет слова точно 6 символов длиной

console.log( 'Words exactly 6 chars long: ', text.match(/\b\w{6}\b/g) );

Валидация целых строк

В JavaScript такие выражения можно использовать для проверки пользовательского ввода из текстовых полей. Для валидации строк используется обычное регулярное выражение, привязанное к началу и концу фрагмента текста, использующее для этого выражения ^ (начало строки) и $ (конец строки). Эти символы гарантируют, что шаблон, который вы пишете, охватывает всю длину текста, а не только соответствует его части.

Кроме того, в этом случае мы используем метод test() объекта regex, который возвращает true или false, при проверке соответствия регулярного выражения строке.

// У нас имеется массив строк, давайте найдем ссылки.

var strings = [
	'https://proglib.io/',
	'this is not a URL',
	'https://google.com/',
	'123461',
	'https://proglib.io/?s=google',
	'http://not a valid url',
	'abc http://invalid.url/'
];

var regex = /^https?:\/\/[\w\/?.&-=]+$/;

var urls = [];

for( var i = 0; i < strings.length; i++ ){

	if( regex.test(strings[i]) ){
		
		// Валидная ссылка
		urls.push(strings[i]);

	}

}

console.log('Valid URLs: ', urls);

Поиск и замена

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

Набор шаблонов, заключенных в круглые скобки () – это группа. Каждая группа собирает текст, который соответствует шаблонам. Текст, сравниваемый с каждой группой, может быть отмечен позже индексами с префиксом в виде знака доллара (начиная с $1 для первой группы).

// Используем обратные ссылки
// Найдем слова, состоящие только из одинаковых букв

var text = 'Abc ddefg, hijk lllll mnopqr ssss. Tuv wxyyy z.';

var sameLetterRegex = /\b(\w)\1*\b/g;

console.log( text.match(sameLetterRegex) );


// Давайте переделаем "John Smith" в "Smith, John"
// Каждая группа (\w+) совпадает с одним словом. Каждой группе
// присваивается индекс, начинающийся с $1

var name = 'John Smith';
var nameRegex = /(\w+) (\w+)/;

console.log( name.replace(nameRegex, '$2, $1') );

// Или сделаем фамилию с большой буквы

var upcasename = name.replace(nameRegex, function(string, group1, group2){
	return group2.toUpperCase() + ', ' + group1;
});

console.log( upcasename );

Дополнительные ресурсы и дальнейшее чтение

Описанные в этой статье примеры помогут в решении 80% проблем, связанных с регулярными выражениями. Для остальных 20% загляните на следующие ресурсы:

RegexOne - интерактивное учебное пособие по регулярным выражениям.
Mozila's JavaScript Regex
Regexr - инструмент для визуальной отладки и тестирования регулярных выражений в браузере.
regular-expressions.info - масса информации и технических деталей о регулярных выражениях.

Другие статьи по теме

11 материалов по регулярным выражениям

Практическое введение в регулярные выражения для новичков

РУБРИКИ В СТАТЬЕ

Комментарии 0

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ

BUG