Регулярные выражения Достаточно! [Чистые галантереи, проверьте на недостатки и устраните утечки]

предисловие

«Ты не узнаешь крепости алкоголя, пока не напьешься 🍷 , и не узнаешь веса, пока не влюбишься. ❤️»

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

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

🍔 Прочитав эту статью, вы сможете получить следующие знания 🍔:

• Научиться校验Является ли регулярным написанным собой правильным (уменьшить или избежать потенциальных ошибок)!
• может быть быстрым搜索с нужной вам регулярностью!
• Можете ли вы освоить несколько少装插件的正则
• полностью понять правила实例方法,高级模式,基础用法(查缺补漏)
• Соответствующий модуль предоставляет ссылку для использования и может быстро понять более подробное использование.

Статья немного длинновата, рекомендуется добавить в закладки ⭐️ (Ctrl+D или command+D) ⭐️

---

Сначала немного галантереи, а потом поговорим об основах.

🍞 Проверьте правильность вашего регулярного выражения!

Позвольте представить вам онлайн-инструмент для работы с регулярными выражениями,利用此工具，你的正则能匹配到哪些字符 就能一目了然.
Вот номер телефона/^1[34578]\d{9}$/обычный дисплейНажмите, чтобы попробовать

---

🍞 Найдите нужное регулярное выражение!

Этот инструмент поиска поддерживает как веб-поиск, так и прямой поиск в vscode. Большинство обычных, используемых в повседневном использовании, можно найти здесь.

• Поиск регулярных выражений в Интернете
• Ниже показано использование редактора vscode.Для получения подробной информации, пожалуйста, обратитесь к инструкции по использованию GitHub[Поддержка мультиплатформенной сети / vscode / idea / Alfred Workflow]

---

🍞 Регулярность, позволяющая устанавливать меньше плагинов!

1. Совпадение с указанным тегом в html-строке

Пример 1:匹配所有 img 标签，并替换 src 属性（富文本编辑文章中常有的场景）

• заменить на функцию

// 需要匹配的字符串
let str='<div><img src=\'123\' /><div><img src="456"/></div></div>'

// 匹配所有图片及src属性的正则表达式
let reg = /<img [^>]*src=['"]([^'"]+)[^>]*>/gi

// 替换后重新赋值
str = str.replace(reg, function(match, ...args){
console.log(`匹配到的img标签：${match}`, `匹配到该标签的src值：${args}`)
return match
})

// 输出：
匹配到的img标签：<img src='123' /> 匹配到该标签的src值：123,5,当前匹配到的完整字符
匹配到的img标签：<img src="456"/> 匹配到该标签的src值：456,27,当前匹配到的完整字符

Пример 2:匹配字符串中的所有video标签、 потом获取到其src属性链接中的sn值、потом再给video标签增加poster属性，其值就是sn的值。
(На самом деле это добавление атрибута обложки в тег видео, а его значением является значение sn в атрибуте src)

var str='<div><video src="http:xxx.com?sn=a-b-c-d" /></div>'

var replacement = (match, $1, $2, $3)=>`${$1}${$2} poster="${$2.match(/sn=([\w-_]+)&?/i)[1]}" ${$3}>`

var result = str.replace(/(<video [^>]*src=['"])([^'"]+sn=[^'"]+['"])([^>]*)>/gi, replacement)

console.log(result) 
// 输出：'<div><video src="http:xxx.com?sn=a-b-c-d" poster="a-b-c-d"  /></div>'

• Используйте знак $ для замены ($1-$99)

// 与 regexp 中的第 1 到第 99 个子表达式相匹配的文本

var name = "Doe, John";
name.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");
// 输出 'John Doe'

var name = '"a", "b"';
name.replace(/"([^"]*)"/g, "'$1'");
// 输出 "'a', 'b'"  （给配置到的ab加上了单引号）

Ключевые моменты:
Используйте функцию для замены
1. Если нет совпадения, следующее не будет выполненоfunctionфункция.
2. Если он совпадает несколько раз, функция будет выполняться несколько раз подряд,returnРезультат заменяет текущее совпадающее значение.
3. Браузер автоматически скомпилирует escape-символ '\' в строку без дополнительной обработки.
4.argsпараметр, вернет каждое подсовпадение (т. е. каждое совпадение в скобках), затем индекс позиции первого символа текущего совпадающего текста, а последний элемент — это сам текст.

При замене на «$1-$99»非常强大,Удобство

Проверьте MDN для более подробной информации

2. Сопоставьте строку URL, чтобы получить каждую отдельную часть

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

• преобразовать объект вurlпараметры, одним предложением (不需要额外引入插件来处理啦)

// queryObject为所要转换的对象
Object.entries(queryObject).map(([key, value])=>key + '=' + value).join('&')

• соответствует каждой части строки URL (一句正则即可)

var reg = /^(https?:)\/\/([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i

var stringUrl = 'https://juejin.cn/user/4353721776234743/posts?id=123#test'

let [href, protocol, hostname, port, pathname, search, hash] = reg.exec(stringUrl)

console.log({href, protocol, hostname, port, pathname, search, hash})

// ** 输出结果和location对应的值一致，感兴趣的小伙伴可以copy后在控制台尝试。 **

выход иlocationСоответствующие значения одинаковы, и заинтересованные друзья могутcopyТогда попробуй в консоли.

3. Сокращено, если условие суждения

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

// 改造前
if(
userName === '迪丽热巴' ||
userName === '赵丽颖' ||
userName === '白百何' ||
userName === '关晓彤' ||
userName === '刘亦菲'
) {
......
}

// 改造后一句话
if(/^迪丽热巴|赵丽颖|白百何|关晓彤|刘亦菲$/.test(userName)){
......
}

Следует отметить, что: использование оператора if должно быть абсолютно правильным, обычно вам нужно использовать символы «^» и «$» для сопоставления, и вы также можете использовать включения массива и другие методы для уникального сопоставления.

4. Определите ядро ​​браузера, терминал доступа и т. д.

    // userAgent的匹配涉及较多，
    // 此处仅简单示例展示
    function parseUA(userAgent) {
      const u = userAgent || navigator.userAgent;
      return {
        isIOS: /iOS|iPad|iPhone/i.test(u),
        isAndroid: /Android/i.test(u), 
        isMobile: /iOS|iPad|iPhone|Android|windows Phone/i.test(u), 
        isQQ: /qq/i.test(u), // 容易误匹配
        isWeixin: /micromessenger/i.test(u), 
        isWeibo: /weibo/i.test(u),
        isMac: /mac/i.test(u),
        isWondows: /Windows NT/i.test(u)
      }
    }

---

🍞 Обычный метод экземпляра (введение, часто используемый)

test

Старомодный способ узнать, соответствует ли регулярное выражение указанной строке. вернуть true или false.

let str = 'hello world!';
let result = /^hello/.test(str);
console.log(result);
// true

match

Тип данных, возвращаемый после выполнения:

• Возвращает тип массива, если есть совпадение, в противном случае возвращает null
• При глобальном сопоставлении с образцом: каждый совпадающий элемент отображается в массиве по очереди. (без свойств массива)
• Сопоставление в неглобальных шаблонах: 0-й элемент массива содержит совпадающий текст, а остальные элементы содержат текст, соответствующий подвыражениям регулярного выражения. И он вернет свойство массива, индекс которого является совпадающей позицией символа, а ввод — ссылкой на строку.

'abc'.match(/e/)
// null

'abc'.match(/b/)
// ['b', index: 1, input: 'abc', groups: undefined]

'a1b2'.match(/\d/g)
// ['1', '2']

exec

Основные сценарии применения:
1. Для поиска текста
2. При сопоставлении нескольких выражений возвращайте их в виде данных одновременно (например, сопоставление строк URL, упомянутых ранее).
3. Возвращайте более полную информацию о сопоставлении

Режим соответствия, результат:

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

// 全局匹配示例
var str = 'ab1ab2'
var reg = /b\d/g
console.log(reg.exec(str))
// 输出：['b1', index: 1, input: 'ab1ab2ab3ab4', groups: undefined]
console.log(reg.lastIndex)
// 输出：3

console.log(reg.exec(str))
// 输出：['b2', index: 4, input: 'ab1ab2ab3', groups: undefined]
console.log(reg.lastIndex)
// 输出：6

console.log(reg.exec(str))
// 输出：null
console.log(reg.lastIndex)
// 输出：0

Примечание. В глобальном режиме возвращайтесь после каждого совпадения.当前匹配文本的第一个字符的位置,пройти черезreg.lastIndexбудет соответствовать следующей позиции последнего символа текста. Таким образом, начальное и конечное значения индекса не относятся к одному и тому же объекту.
будет использоваться при продолжении сопоставленияlastIndexкак новая отправная точка
Вы можете вручную установить значение lastIndex, чтобы установить начальную точку глобального сопоставления, по умолчанию 0
Когда совпадение завершится, будет возвращено значение NULL, и первое начало снова сопоставляется, и оно зацикливается с первого (обычно проверяется значением null.

• При сопоставлении формата подчиненной формы (вы можете обратиться к соответствующей строке URL-адреса, упомянутой ранее)

// 简单示例

var str='abc123'
var reg=/c(\d{3})/
console.log(reg.exec(str))
// 输出：['c123', '123', index: 2, input: 'abc123', groups: undefined]
// 其中 'c123' 为完整匹配，'123'为括号内的字表达式

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

search

где пользователь извлекает строку

1. Извлекаемая строка может быть передана в

var str = 'abcdefg'
var result = str.search('cd')
Console.log (Результат) // Выход: 2

2. Может передаваться при поиске по регулярным выражениям

var str = 'abcdefg'
var result = str.search(/cd/)
console.log(результат) // вывод: 2

replace/replaceAll

Для общего понимания обратитесь к упомянутому ранее разделу «Сопоставление указанных тегов в строках html», в котором в основном анализируется разница с помощью replaceAll.
Формат формы такой:str.replaceAll(regexp/substr,replacement)

1. replaceAll должен использовать g (глобальный модификатор) при использовании обычного поиска, иначе выдаст ошибку (replaceAll called with a non-global RegExp argument)
2. replaceAll, если получена строка, она заменит все совпадающие строки
3. Если оноreplacementКогда это функция обратного вызова, каждое совпадение также будет выполнено. Но вам нужно обратить внимание на параметры в обратном вызове, посмотрите пример:

1. 无子表单式
var str = 'abcb'
// 使用正则必须加全局修饰符
var result = str.replaceAll(/b/g, function(...args){
    console.log(args)
    return args[0]
})
// args的值会依次输出
// ['b', 1, 'abcb']
// ['b', 3, 'abcb']

2. 有子表达式
var str = 'ab1cb2'
// 使用正则必须加全局修饰符
var result = str.replaceAll(/b(\d)/g, function(...args){
    console.log(args)
    return args[0]
})
// args的值会依次输出
// ['b1', '1', 1, 'ab1cb2']
// ['b2', '2', 4, 'ab1cb2']

结论：

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

split

(Используется для разделения строки на массив строк.) Форма: stringObject.split(разделитель,сколько)
сепаратор может быть строкой или обычным
сколько — это число, указывающее максимальную длину возвращаемого массива.

"hello".split("")	//可返回 ["h", "e", "l", "l", "o"]

"hello".split("", 3)	//可返回 ["h", "e", "l"]

Дополнительные сведения о методах обычного экземпляра см. в MDN.

---

🍞 Расширенный режим

будет использоваться в следующей демонстрацииstr.match(reg)для вывода совпадающей строки для более четкого понимания.

Примечание. Прямая и обратная предварительная проверка [положительно|отрицательно], несовместимая с устройствами iOS, браузерами Safari и IE, вызовет синтаксическую ошибку.SyntaxError: Invalid regular expression: invalid group specifier name

Позитивные позитивные lookahead (? = Pattern)

var reg = /Windows(?=95|98|NT|2000)/
'Windows95'.match(reg) // 匹配到：['Windows']
'Windows666'.match(reg) // 匹配到：null
reg.test('Windows95') // true
reg.test('Windows2000') // true
reg.test('Windows3.1') // false

Пересылать совпадающие символы только после ?=

положительный отрицательный взгляд вперед

var reg = /Windows(?!95|98|NT|2000)/
'Windows95'.match(reg) // 匹配到：null
'Windows666'.match(reg) // 匹配到：['Windows']
reg.test('Windows95') // false

Только символы после не-?! могут быть сопоставлены только положительно

Обратная утвердительная предварительная проверка (см. пример для понимания)

var reg = /(?<=95|98|NT|2000)Windows/
'95Windows'.match(reg) // 匹配到：['Windows']
'666Windows'.match(reg) // 匹配到：null
reg.test('95Windows') // true
reg.test('66Windows') // false

// 项目示例（在路径拼接中，将连续的两个以上的'/'替换为单斜杠（但排除以'//'开头的））
var reg = /(?<=[\w-_]+)[\/]{2,}/gi
'//localhost:3000//list/'.replace(reg, '/') // 输出 '//localhost:3000/list/'
'content//news//detail//'.replace(reg, '/') // 输出 'content/news/detail/'

Обратная отрицательная предварительная проверка (см. пример для понимания)

var reg = /(?<!95|98|NT|2000)Windows/
'95Windows'.match(reg) // 匹配到：null
'666Windows'.match(reg) // 匹配到：['Windows']
reg.test('95Windows') // false
reg.test('66Windows') // ture

жадный режим

При успешном сопоставлении постарайтесь сопоставить как можно больше

1. 尽可能多的匹配
var str = 'axxxa'
var reg = /a(\w+)/
reg.test(str) // (\w)匹配到了'xxxa'，返回true

2. 不得不匹配
var str = 'axxxa'
var reg = /a(\w+)a/
reg.test(str) // (\w)匹配到了'xxx'(让出了最后一个a)，返回true

ленивый режим (не жадный режим)

Также называемый ленивым режимом, при успешном сопоставлении старайтесь сопоставлять как можно меньше

1. 尽可能少的匹配
var str = 'axxxa'
var reg = /a(\w+?)/
reg.test(str) // 匹配到了'ax'，返回true

2. 不得不匹配
var str = 'axxxa'
var reg = /a(\w+?)a/
reg.test(str) // 匹配到了'axxxa'，返回true

проиллюстрировать:

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

🍞 Регулярное выражение GM [ссылка]

китайский матч

let regex = [\u4e00-\u9fa5]

Совпадение 11-значного номера мобильного телефона

let regex = /^1[34578]\d{9}$/g;

Проверка даты (ГГГГ-ММ-ДД)

let regex = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;

Совпадение идентификаторов

let regex = /^[1-9]\d{7}(?:0\d|10|11|12)(?:0[1-9]|[1-2][\d]|30|31)\d{3}$/

Поисковый запрос больше регулярных выражений

Вот коллекция регулярных выражений, вы можете искать нужное регулярное выражениеНажмите, чтобы узнать больше

🍞 Основное использование

Метасимволы, которые необходимо экранировать

( [ { \ ^ $ | ) ? * + . ] }

Общие символы

метасимвол	описывать
.	Найти один символ (кроме новой строки и конца строки)
\w	Сопоставьте буквы, цифры, символы подчеркивания. Эквивалент [A-Za-z0-9_]
\W	соответствует символу, не являющемуся словом (напротив \w)
\d	совпадение чисел
\D	соответствует нечисловым символам
\s	совпадать с пробелом
\S	соответствует непробельным символам
\b	совпадать с границами слов
\B	соответствовать границам слов
\0	Найти символы NUL[\x00-\x7F],Такие как/\0/.test('\x00') // true
\n	Найти новую строку
\f	Найти разрыв формы
\r	найти возврат каретки
\t	найти вкладки
\v	Найти вертикальные вкладки
\xxx	Найдите символ, указанный восьмеричным числом xxxx
\xdd	Найти шестнадцатеричное число dd недопустимых символов
\uxxxx	Найти символы Unicode, указанные в шестнадцатеричном xxxx
\uhhhh	Соответствует кодовой единице UTF-16, представленной четырехзначным шестнадцатеричным числом.

квантификатор

квантификатор	описывать
^	Совпадение с началом, при многострочном обнаружении, совпадет с началом строки
$	Совпадение с концом при многострочном обнаружении совпадет с концом строки
*	Соответствует предыдущему подсудительному снижению нулю или более раз.
+	Соответствует предыдущему подвыражению один или несколько раз.
?	Соответствует предыдущему подвыражению ноль или один раз.
{n}	n — целое неотрицательное число. Совпадение определенное количество n раз.
{n,}	n — целое неотрицательное число. Совпадение не менее n раз.
{n,m}	И m, и n — неотрицательные целые числа, совпадающие не менее n и не более m раз.

Для более основных деталей, пожалуйста, обратитесь к MDN

🍞 Ссылки по теме

Графический онлайн-инструмент регулярных выражений[Проверьте обычную рекомендацию]
Поисковый запрос больше регулярных выражений[Поиск обычной рекомендации]
Справочник по регулярным выражениям[Пользовательский интерфейс средний 🤗, но его описания и примеры короткие и изысканные, их легко понять]
Пожалуйста, обратитесь к MDN за подробностями
Не запоминайте регулярные выражения

автор:tager
Адрес связанной статьи:https://juejin.cn/user/4353721776234743/posts
Авторские права принадлежат автору. Для коммерческих перепечаток, пожалуйста, свяжитесь с автором для получения разрешения, а для некоммерческих перепечаток, пожалуйста, укажите источник.