Как быстро приступить к работе с VUE3.0: Начало обучения
Рекомендации по теме: Руководство по JavaScript
Регулярное выражение ( Регулярное выражение, называемое регулярным выражением )
Применение: при разработке проектов такие функции, как скрытие определенных цифр номеров мобильных телефонов, сбор данных, фильтрация конфиденциальных слов и проверка формы, могут быть реализованы с использованием регулярных выражений.
Области применения: В операционных системах (Unix, Linux и т. д.), языках программирования (C, C++, Java, PHP, Python, JavaScript и т. д.).
Например: Возьмем в качестве примера текстовый поиск. Если вы нашли строку, соответствующую определенному признаку (например, номеру мобильного телефона) в большом объеме текста, то запишите этот признак в соответствии с синтаксисом регулярного выражения, чтобы сформировать строку. шаблон, распознаваемый компьютерной программой (Шаблон), а затем компьютерная программа будет сопоставлять текст по этому шаблону, чтобы найти строку, соответствующую правилам.
История регулярных выражений 
Форма выражения регулярного выражения
Во время разработки часто необходимо искать и сопоставлять указанные строки на основе регулярных шаблонов сопоставления.
Помимо получения указанного значения в строке, метод match() в объекте String может также сопоставлять весь контент, который соответствует требованиям в целевой строке в соответствии с обычными правилами, и сохранять его в массиве после совпадение успешное, возвращает false, если совпадение не удалось.
В приложении JavaScript сначала необходимо создать регулярный объект, прежде чем использовать регулярные выражения. Помимо описанного ранее буквального создания, его также можно создать с помощью конструктора объекта RegExp.
Чтобы читатели могли лучше понять процесс приобретения обычных объектов, будет дано сравнительное объяснение на примере сопоставления специальных символов "^", "$", "*", "." и "" .
Обратите внимание:
хотя обычные объекты, созданные методом конструктора и литеральным методом, полностью идентичны по функциям, они имеют определенные различия в реализации синтаксиса. При использовании первого шаблона необходимо избегать обратной косой черты (). При написании последнего шаблона его следует размещать внутри разделителя «/», а тег flags следует размещать за пределами конечного разделителя.
Преимущества: Эффективное использование категорий символов может сделать регулярные выражения более краткими и легкими для чтения.
Пример 1. Прописные, строчные буквы и цифры могут быть непосредственно представлены с помощью «w».
Случай 2: Если вы хотите сопоставить числа от 0 до 9, вы можете использовать «d».
Чтобы облегчить читателям понимание использования категорий символов, в качестве примеров для демонстрации используются символы "." и "s".
Представление наборов символов: «[]» может реализовывать набор символов.
Диапазон символов: при использовании вместе с дефисом «-» это означает совпадение символов в указанном диапазоне.
Символы-антонимы: когда метасимвол «^» используется вместе с «[]», он называется символом-антонимом.
За пределами определенного диапазона: «^» используется вместе с «[]» для сопоставления символов, не входящих в указанный диапазон символов.
Возьмите строку 'get好TB6'.match(/pattern/g) в качестве примера, чтобы продемонстрировать ее обычное использование.
Обратите внимание
, что символ «-» обычно представляет собой только обычный символ и
используется как метасимвол только при представлении диапазона символов. Диапазон, представленный дефисом «-», соответствует последовательности кодировки символов. Например, «aZ», «za» и «a-9» являются недопустимыми диапазонами.
[Дело] Ограничить вводимый контент
Идея реализации кода :
написать HTML, установить текстовое поле для года (года) и месяца (месяца) и кнопку запроса.
Получите объект элемента операции и проверьте отправку формы.
Проверьте год в обычной форме: /^d{4}/. Проверьте месяц, обычное правило: / ( ( 0 ? [ 1 − 9 ] ) ∣ ( 1 [ 012 ] ) ) /.
Текстовое поле получает фокус, а цвет поля подсказки удаляется. Текстовое поле теряет фокус, удаляет пробелы с обоих концов входного содержимого и проверяет.
Реализация кода
<!DOCTYPE html>
<html>
<голова>
<мета-кодировка="UTF-8">
<title>Ограничить входной контент</title>
<стиль>
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="форма">
Год<input type="text" name="year">
Месяц<input type="text" name="month">
<input type="submit" value="query">
</форма>
<p id="result"></p>
<скрипт>
функция 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'); // объект элемента <form> var result = document.getElementById('result'); // объект элемента <p> var inputs = document.getElementsByTagName('input'); // Коллекция элементов <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 (это);
};
</скрипт>
</тело>
</html> : определяет, соответствует ли регулярное выражение указанной строке.
Если совпадение выполнено успешно, возвращаемое значение метода test() равно true, в противном случае он возвращает false.
Обнаружение модификаторов шаблона обычных объектов
В классе RegExp также есть некоторые свойства, которые используются для обнаружения модификаторов шаблона, используемых текущим регулярным объектом, и указания начального индекса следующего совпадения.
Чтобы читатели могли лучше понять использование этих атрибутов, в качестве примера ниже используется сопоставление пробелов.
: может возвращать позицию, где подстрока указанного шаблона впервые появляется в строке. Он более мощный, чем метод indexOf().
Метод Split() : используется для разделения строки на массив строк на основе указанного разделителя. Разделенный массив строк не включает разделитель.
Если существует более одного разделителя, для завершения операции разделения строки необходимо определить обычный объект.
Обратите внимание, что
когда строка пуста, метод Split() возвращает массив «[»»]», содержащий пустую строку. Если строка и разделитель являются пустыми строками, возвращается пустой массив «[]».
Практическая
проверка надежности пароля
. Условия проверки надежности пароля:
① Длина <6 цифр, надежность пароля отсутствует.
②Длина пароля составляет >6 символов и содержит одну из цифр, букв или других символов, а надежность пароля «низкая».
③Длина пароля составляет >6 символов и содержит два типа цифр, букв или других символов. Надежность пароля — «средняя».
④ Если длина пароля превышает 6 символов и содержит три или более типов цифр, букв или других символов, надежность пароля — «Высокая».
задает вопрос: Соответствует последовательному символу, например 6 последовательным цифрам «458925».
Решение 1: Обычный объект/dddddd/gi.
Проблемы: повторяющийся символ «d» нелегко читать и его неудобно писать.
Решение 2. Используйте квалификаторы (?, +, *, { }) для завершения сопоставления последовательных вхождений определенного символа. Обычный объект/d{6}/gi.
Когда в квалификаторе используется точка (.), он может соответствовать любому символу в указанном диапазоне чисел.
Регулярное выражение поддерживает жадное и ленивое сопоставление при сопоставлении любого символа в указанном диапазоне.
В регулярных выражениях содержимое, заключенное в скобки «()», называется «подвыражением».
Круглые скобки реализуют сопоставление catch и cater, и если круглые скобки не используются, получается catch и er. 
Если они не сгруппированы, это означает совпадение двух символов c после группировки, это означает совпадение двух строк «bc».
Захват: процесс сохранения содержимого, соответствующего подвыражению, в области кэша системы.
Без захвата: не сохраняйте соответствующее содержимое подвыражения в системном кеше, для этого используйте (?:x).
Метод replace() объекта String может напрямую использовать $n (n — положительное целое число больше 0) для получения захваченного содержимого и завершения операции замены содержимого, захваченного подвыражением.
Вы можете использовать «(?:x)» для достижения соответствия без захвата.
При написании регулярного выражения, если вы хотите получить захваченное содержимое подвыражения, хранящееся в области кэша регулярного выражения, вы можете использовать «n» (n — положительное целое число, большее 0, это ссылка). процесс является «обратной ссылкой».
Утверждение нулевой ширины : относится к сопоставлению подвыражения нулевой ширины, используемому для определения того, содержит ли содержимое, соответствующее подвыражению, определенный набор символов до или после.
Классификация: делится на прямую предварительную выборку и обратную предварительную выборку, но в JavaScript поддерживается только прямая предварительная выборка, то есть сопоставление данных до того, как они содержат или не содержат захваченный контент, а результаты сопоставления не содержат захваченного контента.
В регулярных выражениях имеется множество операторов. В реальном приложении различные операторы будут сопоставляться в порядке приоритета. Приоритет часто используемых операторов в регулярных выражениях (в порядке убывания) следующий.
[Кейс] Поиск и замена контента
Идея реализации кода :
Реализация кода
<!DOCTYPE html>
<html>
<голова>
<мета-кодировка="UTF-8">
<title>Поиск и замена контента</title>
<стиль>
п {поплавок: влево;}
ввод {маржа: 0 20 пикселей;}
</стиль>
</голова>
<тело>
<p>Содержимое перед фильтрацией:<br>
<textarea id="pre" rows="10" cols="40"></textarea>
<input id="btn" type="button" value="filter">
</p>
<p>Отфильтрованный контент:<br>
<textarea id="res" rows="10" cols="40"></textarea>
</p>
<скрипт>
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;
};
</скрипт>
</тело>
</html> Рекомендации по теме: Учебник по изучению JavaScript
. Выше приведены регулярные выражения JavaScript. Для получения более подробной информации, пожалуйста, обратите внимание на другие соответствующие статьи на китайском веб-сайте PHP.
