Регулярные выражения JavaScript, этой статьи достаточно

Как быстро приступить к работе с VUE3.0: Начало обучения

Рекомендации по теме: Руководство по JavaScript

Что такое регулярное выражение

Регулярное выражение ( Регулярное выражение, называемое регулярным выражением )

• — это грамматическое правило, описывающее структуру строки.
• Это особый шаблон форматирования, используемый для проверки соответствия различных строк этой функции, что позволяет выполнять расширенный поиск текста, замену, перехват контента и другие операции.

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

Области применения: В операционных системах (Unix, Linux и т. д.), языках программирования (C, C++, Java, PHP, Python, JavaScript и т. д.).

Например: Возьмем в качестве примера текстовый поиск. Если вы нашли строку, соответствующую определенному признаку (например, номеру мобильного телефона) в большом объеме текста, то запишите этот признак в соответствии с синтаксисом регулярного выражения, чтобы сформировать строку. шаблон, распознаваемый компьютерной программой (Шаблон), а затем компьютерная программа будет сопоставлять текст по этому шаблону, чтобы найти строку, соответствующую правилам.

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

Форма выражения регулярного выражения

• Одним из них является регулярное выражение, соответствующее спецификации POSIX, используемое для обеспечения переносимости между операционными системами.
• Во-первых, при разработке Perl (многофункционального языка программирования) были созданы регулярные выражения Perl. Регулярный синтаксис JavaScript основан на Perl.

Как использовать регулярные выражения

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

Метод exec()

• Метод exec() используется для поиска совпадений в целевой строке, возвращая одновременно только один соответствующий результат.
• Например, найдите abc в указанной строке str.

• «/» в «/abc/i» — это разделитель регулярного выражения, «abc» представляет собой текст шаблона регулярного выражения, а «i» — это идентификатор модификации шаблона, что означает, что регистр игнорируется в str.
• Параметром метода exec() является строка, подлежащая сопоставлению. Если сопоставление выполнено успешно, возвращаемым значением этого метода является массив, в противном случае он возвращает значение null.
• Из результата возврата exec() видно, что первый элемент (AbC), сохраненный в массиве, представляет совпадающую строку; второй индекс элемента представляет значение индекса совпадающего символа в целевой строке (начиная с 0). ; третий входной параметр представляет целевую строку (AbC123abc456).

Метод match()

Помимо получения указанного значения в строке, метод match() в объекте String может также сопоставлять весь контент, который соответствует требованиям в целевой строке в соответствии с обычными правилами, и сохранять его в массиве после совпадение успешное, возвращает false, если совпадение не удалось.

• Локатор «^» можно использовать для сопоставления начала строки.
• Локатор «$» можно использовать для сопоставления конца строки.
• g представляет собой глобальное совпадение, используемое для продолжения поиска после того, как будет найдено первое совпадение.

Получение регулярного объекта

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

• Шаблон — это текст шаблона регулярного выражения, состоящий из метасимволов и буквенных символов.
• Метасимволы — это символы со специальным значением, например «^», «.» или «*».
• Текстовые символы — это обычный текст, например буквы и цифры.
• Флаги представляют собой идентификатор модификации шаблона, который используется для дальнейшей установки регулярного выражения.
  
  

• Модификаторы режима также можно использовать в нескольких комбинациях в соответствии с фактическими потребностями.
• Например, чтобы игнорировать регистр и сопоставлять глобально, вы можете использовать gi напрямую, и при написании нескольких модификаторов шаблона требования к порядку не требуются.
• Следовательно, разумное использование модификаторов шаблонов может сделать регулярные выражения более краткими и интуитивно понятными.

Чтобы читатели могли лучше понять процесс приобретения обычных объектов, будет дано сравнительное объяснение на примере сопоставления специальных символов "^", "$", "*", "." и "" .

• Селектор «|» означает «или», и условие поиска может быть установлено, если выполняется одно из условий.
• В JavaScript существует проблема экранирования строк, поэтому символ "" в строке кода представляет собой обратную косую черту "".
• При сопоставлении специальных символов в регулярных выражениях также необходима обратная косая черта (), чтобы экранировать специальные символы. Например, "\" становится "" после escape-символа строки, а затем в регулярном выражении используется "" для соответствия "".

Обратите внимание:

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

категорий символов

: Эффективное использование категорий символов может сделать регулярные выражения более краткими и легкими для чтения.

Пример 1. Прописные, строчные буквы и цифры могут быть непосредственно представлены с помощью «w».

Случай 2: Если вы хотите сопоставить числа от 0 до 9, вы можете использовать «d».

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

• Обычный объект reg используется для сопоставления любых двух символов после пробела (кроме символа новой строки).
• Поэтому в результатах, просматриваемых на консоли, перед идентификатором стоит пробел.

набор символов

Представление наборов символов: «[]» может реализовывать набор символов.

Диапазон символов: при использовании вместе с дефисом «-» это означает совпадение символов в указанном диапазоне.

Символы-антонимы: когда метасимвол «^» используется вместе с «[]», он называется символом-антонимом.

За пределами определенного диапазона: «^» используется вместе с «[]» для сопоставления символов, не входящих в указанный диапазон символов.

Возьмите строку 'get好TB6'.match(/pattern/g) в качестве примера, чтобы продемонстрировать ее обычное использование.

Обратите внимание

, что символ «-» обычно представляет собой только обычный символ и

используется как метасимвол только при представлении диапазона символов. Диапазон, представленный дефисом «-», соответствует последовательности кодировки символов. Например, «aZ», «za» и «a-9» являются недопустимыми диапазонами.

[Дело] Ограничить вводимый контент

Идея реализации кода :

написать HTML, установить текстовое поле для года (года) и месяца (месяца) и кнопку запроса.

Получите объект элемента операции и проверьте отправку формы.

Проверьте год в обычной форме: /^d{4}/. Проверьте месяц, обычное правило: / ( ( 0 ? [ 1 − 9 ] ) ∣ ( 1 [ 012 ] ) ) /.

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

Реализация кода

	
	
	<голова>
	<мета-кодировка="UTF-8">
	
	<стиль>
	input[type=text]{ширина: 40 пикселей;border-color: #bbb;height: 25px;font-size: 14px;border-radius: 2px;outline: 0;border: #ccc 1px Solid;padding: 0 10px; -webkit-transition: box-shadow .5s;margin-bottom: 15px;}
	input[type=text]:hover, input[type=text]:focus,input[type=submit]:hover{border: 1px Solid #56b4ef; box-shadow: inset 0 1px 3px rgba(0,0,0, .05),0 0 8px rgba(82,168,236,.6); -webkit-transition: box-shadow .5s;}
	input::-webkit-input-placeholder {цвет: #999; -webkit-transition: цвет .5s;}
	input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {color: #c2c2c2; -webkit-transition: color .5s;}
	input[type=submit]{высота: 30 пикселей; ширина: 80 пикселей; фон: #4393C9; граница: 1 пиксель, сплошной #fff; цвет: #fff; шрифт: 14 пикселей, жирнее }
	
	
	<тело>
	<форма id="форма">
	Год
	Месяц
	
	
	

	<скрипт>
	функция checkYear(obj) {
	if (!obj.value.match(/^d{4}$/)) {
	obj.style.borderColor = 'красный';
	result.innerHTML = 'Ошибка ввода: год представлен 4 цифрами';
	вернуть ложь;
	}
	result.innerHTML = '';
	вернуть истину;
	}
	функция checkMonth(obj) {
	if (!obj.value.match(/^((0?[1-9])|(1[012]))$/)) {
	obj.style.borderColor = 'красный';
	result.innerHTML = 'Ошибка ввода, месяц находится в диапазоне от 1 до 12';
	вернуть ложь;
	}
	result.innerHTML = '';
	вернуть истину;
	}
	var form = document.getElementById('form'); // объект элемента 
 var result = document.getElementById('result'); // объект элемента 
 var inputs = document.getElementsByTagName('input'); // Коллекция элементов  form.onsubmit = function() {
	вернуть checkYear(inputs.year) && checkMonth(inputs.month);
	};
	inputs.year.onfocus = функция() {
	this.style.borderColor = '';
	};
	inputs.month.onfocus = функция() {
	this.style.borderColor = '';
	};
	если (!String.prototype.trim) {
	String.prototype.trim = функция() {
	return this.replace(/^[suFEFFxA0]+|[suFEFFxA0]+$/g, '');
	// uFEFF знак порядка байтов; xA0 не переносит пробелы };
	}
	inputs.year.onblur = функция() {
	это.значение = это.значение.обрезать();
	проверитьГод(это);
	};
	inputs.month.onblur = function() {
	это.значение = это.значение.обрезать();
	checkMonth (это);
	};
	
	
	

Метод test() в классе RegExp

: определяет, соответствует ли регулярное выражение указанной строке.

Если совпадение выполнено успешно, возвращаемое значение метода test() равно true, в противном случае он возвращает false.

Обнаружение модификаторов шаблона обычных объектов

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

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

Метод search() в классе String

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

• Параметр метода search() является объектом регулярного выражения. Если передается объект нерегулярного выражения, он будет неявно преобразован в объект регулярного выражения с использованием «нового RegExp (переданного параметра)».
• Возвращаемое значение метода search() после неудачного совпадения равно -1.

Метод Split() : используется для разделения строки на массив строк на основе указанного разделителя. Разделенный массив строк не включает разделитель.

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

• Разделить по разделителям "@" и "."
• Параметром метода Split() является разделитель, заданный режимом регулярного выражения, а возвращаемым значением является результат разделения, сохраненный в виде массива.

Обратите внимание, что

когда строка пуста, метод Split() возвращает массив «[»»]», содержащий пустую строку. Если строка и разделитель являются пустыми строками, возвращается пустой массив «[]».

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

Практическая

проверка надежности пароля

. Условия проверки надежности пароля:

① Длина <6 цифр, надежность пароля отсутствует.

②Длина пароля составляет >6 символов и содержит одну из цифр, букв или других символов, а надежность пароля «низкая».

③Длина пароля составляет >6 символов и содержит два типа цифр, букв или других символов. Надежность пароля — «средняя».

④ Если длина пароля превышает 6 символов и содержит три или более типов цифр, букв или других символов, надежность пароля — «Высокая».

Спецификатор символа

Спецификатор символа. Спецификатор

задает вопрос: Соответствует последовательному символу, например 6 последовательным цифрам «458925».

Решение 1: Обычный объект/dddddd/gi.

Проблемы: повторяющийся символ «d» нелегко читать и его неудобно писать.

Решение 2. Используйте квалификаторы (?, +, *, { }) для завершения сопоставления последовательных вхождений определенного символа. Обычный объект/d{6}/gi.

Квалификация символа — жадное и ленивое сопоставление.

Когда в квалификаторе используется точка (.), он может соответствовать любому символу в указанном диапазоне чисел.

• Пример: «^hello.*world$».
• Описание: Может соответствовать строкам, начинающимся с hello и заканчивающимся словом world, содержащим ноль или более произвольных символов между ними.

Регулярное выражение поддерживает жадное и ленивое сопоставление при сопоставлении любого символа в указанном диапазоне.

• Так называемый жадный означает сопоставление как можно большего числа символов, тогда как ленивый означает сопоставление как можно меньшего количества символов. По умолчанию используется жадное сопоставление.
• Если вы хотите добиться ленивого сопоставления, вам нужно добавить символ «?» после предыдущего квалификатора.

Символы скобок.

В регулярных выражениях содержимое, заключенное в скобки «()», называется «подвыражением».

эффект

Круглые скобки реализуют сопоставление catch и cater, и если круглые скобки не используются, получается catch и er.

Если они не сгруппированы, это означает совпадение двух символов c после группировки, это означает совпадение двух строк «bc».

с захватом и захват без захвата

: процесс сохранения содержимого, соответствующего подвыражению, в области кэша системы.

Без захвата: не сохраняйте соответствующее содержимое подвыражения в системном кеше, для этого используйте (?:x).

Метод replace() объекта String может напрямую использовать $n (n — положительное целое число больше 0) для получения захваченного содержимого и завершения операции замены содержимого, захваченного подвыражением.

• Первый параметр — это регулярное выражение, используемое для сопоставления строки str и замены содержимого, соответствующего правилам, содержимым, заданным вторым параметром.
• $2 представляет содержимое «Захват», захваченное вторым подвыражением в регулярном выражении reg.
• $1 представляет «Обычное» содержимое, захваченное первым подвыражением.
• Возвращаемое значение — это новая строка после замены, поэтому содержимое исходной строки не будет изменено.

Вы можете использовать «(?:x)» для достижения соответствия без захвата.

Обратная ссылка

При написании регулярного выражения, если вы хотите получить захваченное содержимое подвыражения, хранящееся в области кэша регулярного выражения, вы можете использовать «n» (n — положительное целое число, большее 0, это ссылка). процесс является «обратной ссылкой».

• «1» представляет собой захваченное содержимое первого подвыражения.
• «2» представляет собой захваченное содержимое второго подвыражения и т. д.

• «d» используется для соответствия любому числу от 0 до 9.
• После добавления к нему скобок «()» захваченный контент можно получить по обратной ссылке.
• Таким образом, окончательные результаты сопоставления — 333 и 666.

утверждение нулевой ширины

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

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

Приоритет регулярных операторов

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

[Кейс] Поиск и замена контента

Идея реализации кода :

• напишите HTML и определите два текстовых поля: одно для пользовательского ввода, а другое для отображения отфильтрованного содержимого, заменяемого по мере необходимости.
• Если пользовательский ввод содержит недопустимые и любые китайские символы, используйте * для его замены.
• Найдите и замените правило контента: /(bad)|[u4e00-u9fa5]/gi.

Реализация кода

	
	
	<голова>
	<мета-кодировка="UTF-8">
	
	<стиль>
	п {поплавок: влево;}
	ввод {маржа: 0 20 пикселей;}
	
	
	<тело>
	
Содержимое перед фильтрацией:

	
	
	
	
Отфильтрованный контент:

	
	
	<скрипт>
	document.getElementById('btn').onclick = function () {
	// Определить правила содержимого, которые необходимо искать и заменять. [u4e00-u9fa5] означает соответствие любым китайским символам var reg = /(bad)|[u4e00-u9fa5]/gi;
	вар стр = document.getElementById('pre').value;
	вар newstr = str.replace(reg, '*');
	document.getElementById('res').innerHTML = newsstr;
	};
	
	
	

Рекомендации по теме: Учебник по изучению JavaScript

. Выше приведены регулярные выражения JavaScript. Для получения более подробной информации, пожалуйста, обратите внимание на другие соответствующие статьи на китайском веб-сайте PHP.