Front-end расширенный высокооплачиваемый обязательный к просмотру — обычные статьи

опрос

предисловие

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

чат

Когда дело доходит до регулярности, первой реакцией каждого должны быть различные формы для проверки того, какое имя пользователя, пароль и почтовый ящик... Это правда, что внешний интерфейс использует регулярность для проверки пользовательского ввода, что является наиболее распространенным сценарием, но я считаю, что большинство внешние интерфейсы игнорируют точку знания регулярности Как и я, Ctrl+c Ctrl+v Все виды регулярных выражений под рукой, ха-ха, мое сердце рухнуло, когда я посмотрел на шаблон исходного кода Vue, анализирующий это регулярное выражение (что это за марсианин) Тогда давайте уничтожим его от имени луны

vue源码-解析属性相关正则
/^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/

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

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

Как с этим бороться?

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

"

Запомните две ключевые роли: 1. Поиск строки 2. Замена строки

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

  • Метод 1: буквальный метод

Формат синтаксиса: /regex body/modifier (необязательно)

const reg = /\d/gi;
  • Способ 2: Конструктор

Формат синтаксиса: new RegExp (тело регулярного выражения [ модификатор])

const reg = new RegExp('\d', 'gi')

Контраст: литеральный метод более лаконичен и эффективен, но не может объединять переменные.

обычно используетсямодификаторследующим образом

модификатор эффект
i Игнорировать соответствие регистра
g Глобальное сопоставление, то есть после сопоставления одного продолжать сопоставление до конца
m Многострочное сопоставление, то есть сопоставление не прекращается после появления новой строки до конца.

3 Синтаксис регулярных выражений

3.1 Набор символов и класс диапазона[ ]

"

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

3.2 Предопределенные классы метасимволов

код иллюстрировать
. соответствует любому одиночному символу, кроме символов новой строки и терминаторов
\d Числа соответствия, эквивалентные [0-9]
\D Соответствует не цифрам, эквивалентным [^0-9]
\s Соответствие пробельным символам, в основном (\n, \f, \r, \t, \v)
\S соответствует непробельным символам
\w Соответствует любому символу слова (цифре, букве, подчеркиванию), эквивалентному [A-Za-z0-9_]
\W соответствует любому символу, не являющемуся словом, в отличие от \w, эквивалентного [^a-za-z0-9_]

3.3 Граничный класс

код иллюстрировать Пример
^ соответствует началу строки /^a/ соответствует «A», а не «An a»
$ Соответствует концу строки /a$/ соответствует «а», а не «а»
\b соответствовать началу или концу слова /\bno/ соответствует «нет» в слове «в полдень»

3.4 Кванторные классы

код иллюстрировать
* Повторить ноль или более раз
+ Повторите один или несколько раз (хотя бы один раз)
? Повторите ноль или один раз (необязательно)
{n} повторить n раз
{n,m} не менее n раз не более m раз
{n,} не менее n раз

3.5 Классы специальных символов

код иллюстрировать Пример
/ Разделитель при объявлении регулярных выражений в литеральном режиме /xxx/
\ Восстановление характерных символов регулярных выражений ? соответствует предыдущему метасимволу 0 или 1 раз, /ba?/ будет соответствовать b,ba, а после \, "/ba\?"/ будет соответствовать только "ba?"
| a|b соответствует строке, содержащей a или b /ab|ba/ будет соответствовать ab,ba

3.6 Захват и не захватывающие пакеты ()

  • Capturegroup(x) соответствует x и фиксирует совпадение

Например: /(foo)/ соответствует и захватывает "foo" в "foo bar". Совпадающая подстрока может быть найдена в элементе [n] или в свойстве $n объекта RegExp.

"foo bar".match(/(foo)\s+bar/)

// ["foo bar", "foo"]

  • Группа без захвата (?:x), соответствующая x, не фиксирует совпадение. Совпадения не могут быть снова доступны из результата
"foo bar".match(/(?:foo)\s+bar/)

// ["foo bar"]

"

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

希望匹配字母，且字母之间可以为1或2时，但最终结果不需要中间的数字  只需要两边的字母
'abcd1j452h'.match(/[a-z]+(1|2)+([a-z]+)/);
["abcd1j", "1", "j"] //不使用非捕获分组 会把中间数字1也放入结果
'abcd1j452h'.match(/[a-z]+(?:1|2)+([a-z]+)/);
["abcd1j", "j"] //这样才完成需求

3.7 Жадные и нежадные режимы

Используйте жадный режим по умолчанию, чтобы сопоставить как можно больше

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

"1234567".match(/\d{2,5}/)
//默认贪婪模式（尽可能匹配多）
[12345]

"1234567".match(/\d{2,5}?/)
//转成非贪婪模式
[12]

3.8 Прямой положительный поиск и прямой отрицательный просмотр

код иллюстрировать
x(?=y) Совпадение x только в том случае, если за x сразу следует y.
x(?!y) Совпадение x только в том случае, если за x не следует непосредственно y. 
const target = 'bg.png index.html app.js index.css test.png'
//从以上字符串中找出以png结尾的文件名

//不使用正向肯定查找的做法
target.match(/\b(\w+)\.png/g)
//["bg.png", "test.png"] 我们只想要文件名  不想要.png后缀


使用正向肯定查找
target.match(/\b(\w+)(?=\.png)/g)
// ["bg", "test"]

"

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

4 Обычные атрибуты экземпляра

  • Включает ли RegExp.prototype.global глобальное сопоставление

  • RegExp.prototype.ignoreCase, следует ли игнорировать регистр символов

  • RegExp.prototype.lastIndex Позиция индекса строки, с которой начинается следующее совпадение

  • Включает ли RegExp.prototype.multiline многострочное сопоставление шаблонов (влияет на поведение ^ и $)

  • RegExp.prototype.source Исходный текст шаблона обычного объекта.

  • Включает ли RegExp.prototype.sticky липкое сопоставление

5 Регулярный пример метода

5.1 test

  • Синтаксис: regObj.test(str) выполняет поиск в строке

  • Возвращаемое значение: логическое значение. Проверяет, существует ли строка, соответствующая шаблону regObj в строке str, возвращает true, если она существует, и возвращает false, если она не существует.

"

Использование очень простое, но есть подводные камни.Этот метод ведет себя иначе, когда обычный объект имеет глобальный атрибут (g).

Давайте сначала представим свойство lastIndex регулярного объекта LastIndex — это позиция, с которой регулярное выражение начинает совпадать при совпадении содержимого.

без глобального атрибута g

Из вышеизложенного видно: в начале совпадение начинается с нижнего индекса 0. Без g, сколько бы раз он ни выполнялся, свойство lastIndex обычного объекта остается неизменным.

с глобальным атрибутом g

Из приведенного выше видно: начало сопоставления начинается с нижнего индекса 0. После сопоставления свойство lastIndex обычного объекта будет автоматически изменено, и оно будет изменено на следующую позицию последнего символа совпадающего содержимого текущее выражение. До конца строки сбросьте lastIndex на 0. Видно, что один из них не совпалПоскольку при lastIndex равном 9 результат сопоставления отсутствует, следует отметить, что

5.2 exec

  • Синтаксис: regObj.exec(str) выполняет поиск в строке

  • Возвращаемое значение: null, если нет подходящего текста, иначе массив результатов:

Возвращаемый массив: первый элемент — это текст, соответствующий регулярному выражению; второй элемент — это текст, который соответствует первой группе захвата RegExpObject (если есть); третий элемент — это первый элемент, соответствующий RegExpObject. Две группы захвата совпадают. текст (если есть) и так далее.

"

Этот метод ведет себя по-разному в зависимости от того, имеет ли обычный объект глобальный атрибут (g), и его производительность соответствует тесту

без г

с г

6 методов экземпляра строки

6.1 search

  • Синтаксис: str.search(reg) находит индекс первого совпадения

  • Возвращаемое значение: возвращает успешное совпадение первой позиции, если совпадения нет, возвращает -1

'abc'.search(/b/)
//1

6.2 split

  • Синтаксис: str.split(reg[maxLength]) Первый параметр может быть строкой или регулярным выражением, являющимся разделителем, второй параметр является необязательным и ограничивает максимальную длину возвращаемого массива.

  • Возвращаемое значение: массив

'abc-def_mno+xyz'.split(/[-_+]/, 3);
//["abc", "def", "mno"]

6.3 match

  • Синтаксис: str.match(reg) находит совпадение одного или нескольких регулярных выражений.

  • Возвращаемое значение: массив или ноль

"

Этот метод ведет себя по-разному, если обычный объект имеет глобальный атрибут (g) или нет.

Когда вы не приносите G (только после того, как совпадение будет найдено, остановите возвращаемый результат, и метод exec будет согласованным)

var str='12a12b12c1111';
var reg=/\d+([a-z]+)/；
str.match(reg)
//["12a", "a", index: 0, input: "12a12b12c1111", groups: undefined]

С g (глобальный поиск возвращает массив, если найдена одна или несколько совпадающих строк — группы захвата отсутствуют)

var str='12a12b12c1111';
var reg=/\d+([a-z]+)/g;
str.match(reg)
//["12a", "12b", "12c"]

6.4 replace

  • Синтаксис: str.replace(reg/substr, newStr/function) Первый параметр может быть строкой или регулярным выражением, и его функция должна соответствовать. Второй параметр может быть строкой или функцией, и его роль — замена.

  • Возвращаемое значение: новая строка после замены, исходная строка остается неизменной

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

'abc-xyz-abc'.replace('abc', 'biu');
// "biu-xyz-abc"

'abc-xyz-abc'.replace(/abc/g, 'biu');
// "biu-xyz-biu"

Второй параметрнитьВремя

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

Цифры $ представляют соответствующий порядок захвата групп. Обратите внимание, что хотя это переменная, не записывайте ее как строку шаблона.${$1}biu, внутренняя логика замены автоматически проанализирует строку и извлечет переменную.

var reg=/(\d{2})\/(\d{2})\/(\d{4})/
var str='09/05/2020'
var res=str.replace(reg,'$3-$2-$1') // 2020-05-09

Второй параметрфункцияВремя

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

Возвращаемое значение функции — это то, что должно быть заменено. Если функция не имеет возвращаемого значения, она возвращает значение по умолчанию.undefined, поэтому замена не определена.

Давайте посмотрим на пример

var str='a1b2c3d4e'
var result=str.replace(/(\d)(\w)(\d)/g,(matchStr,group1,group2,group3,index,originStr)=>{
return group1+group3
}) //'a12c34e'

  • Первый параметр matchStr — это результат сопоставления.

  • Второй параметр и до предпоследнего параметра При наличии группы захвата последующие аргументы функции соответствуют группе захвата один к одному. Например, от group1 до group3 в нашем примере

  • Второй параметр предпоследний является положение соответствующего результата в тексте.

  • Последний параметр - исходный текст

хорошо, давайте проанализируем пример

  1. Первый поиск соответствует '1b2'

  2. Затем мы возвращаем group1+group3

  3. group1 - первая группа захвата, равная 1

  4. Group3 — третья группа захвата 2

  5. Строка «1» + «2» равна «12»

  6. Поэтому заменили «1b2» на 12.

  7. Результат после первой замены: «a12».

  8. Затем продолжите поиск в обратном направлении и замените «3d4» на «34».

  9. Конечным результатом является «a12c34e».

7 Расширенное мышление

Очень важно терпеливо видеть, что принцип слишком скучен Ха-ха, давайте вернемся к началу исходного кода VUE - Анализ шаблона Вот что это значит.

/^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
"

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

Я действительно не могу думать об этом, пожалуйста, посмотритеИзучите регулярные выражения из разбора шаблонов vue

Группа передовых рыболовных технологий Brother Shark

Приветствую всех на технических биржахСвязь

Категории