Relacionada con la coincidencia de cadenas de expresiones regulares
Cita: "Minilibro sobre expresiones regulares de JavaScript"
Lea el "Mini libro de expresiones regulares de JavaScript" de Lao Yao 丨 Insight Producer, que es un buen libro con productos secos, fácil de entender y una combinación de gráficos y texto. Regular es un patrón coincidente, ya sea caracteres coincidentes o posiciones coincidentes
. El minilibro de expresiones regulares de JavaScript
1. Dos tipos de coincidencia difusa (difusa horizontal y difusa vertical)
La ambigüedad horizontal significa que la longitud de una cadena que puede coincidir con un patrón regular no es fija y puede serlo en una variedad de situaciones. La forma
de lograrlo es utilizar cuantificadores. Por ejemplo, {m,n} significa que hay al menos m apariciones consecutivas y como máximo n veces.
// 释1：表示第一个字符是'a'，第二个字符为'b'，2-5（索引）的字符只能够为'b'，后面紧接字符'c'
// 释2：{2,5}量词理解：第一个字符为'a'，后面紧接'b'出现2到5次，后面紧接字符'c'
// 其中 g 是正则的一个修饰符，表示全局匹配
let R = /ab{2,5}c/g
let string = 'abc abbc abbbc abbbbc abbbbbc abbbbbbc abdc ab1c'
string.match(R) // ['abbc', 'abbbc', 'abbbbc', 'abbbbbc']
La ambigüedad vertical significa que cuando una cadena coincidente normal es específica de un determinado carácter, puede que no sea un determinado carácter y puede haber muchas posibilidades.
La forma en que esto se hace es mediante el uso de grupos de caracteres. Por ejemplo, [abc] significa que el carácter es cualquiera de los caracteres "a", "b" y "c".
// 表示第一个字符是'a'，第二个字符为123数组其中的一个，后面紧接字符'c'，字符串长度为3
let R = /a[123]c/g
let string = 'a1c a2c a3c abc a123c a12c a1dc ab1c'
string.match(R) // ['a1c', 'a2c', 'a3c']
En segundo lugar, el grupo de personajes (aunque se llama grupo de personajes (clase de personaje), pero es solo uno de los personajes)
Por ejemplo [abc], significa hacer coincidir un carácter, puede ser uno de "a", "b", "c"
1. rango expreso
[1-5a-dA-D] //表示范围[12345abcdABCD]
[a-z] // 表示所有小写字母
// 正则语言中的特殊字符表达时要么放在开头，要么放在结尾，要么转义，例如要匹配"a"、"z"、"-"三者中任意字符
[a\-z]、[-az]、[az-]
2. Negar rango
Grupo de caracteres antónimos, coloque ^ (carácter de intercalación) en el primer grupo de caracteres, lo que indica el concepto de negación.
[^abc] // 除了"a" "b" "c" 其他任意字符都满足
3. Abreviaturas comunes
\d // 表示 [0-9]。表示是一位数字，记忆方式：其英文是 digit（数字）
\D // 表示 [^0-9]。表示除数字外的任意字符
\w // 表示 [0-9a-zA-Z_]。表示数字、大小写字母和下划线，记忆方式：w 是 word 的简写，也称单词字符
\W // 表示 [^0-9a-zA-Z_]。非单词字符
\s // 表示 [ \t\v\n\r\f]。表示空白符，包括空格、水平制表符、垂直制表符、换行符、回车符、换页符
\S // 表示 [^ \t\v\n\r\f]。 非空白符
. // 表示 [^\n\r\u2028\u2029]。通配符，表示几乎任意字符。换行符、回车符、行分隔符和段分隔符除外，记忆方式：想想省略号 … 中的每个点，都可以理解成占位符，表示任何类似的东西
¿Qué pasa si quieres coincidir con cualquier personaje? Se puede utilizar cualquiera de [\d\D], [\w\W], [\s\S] y [^]
3. Cuantificadores
Los cuantificadores también se llaman repeticiones. Después de comprender el significado exacto de {m,n}, solo necesita recordar algunas formas abreviadas
1. Forma breve
{
m,} // 表示至少出现 m 次
{
m} // 等价于 {m,m}，表示出现 m 次。
? // 等价于 {0,1}，表示出现或者不出现
+ // 等价于 {1,}，表示出现至少一次。
* // 等价于 {0,}，表示出现任意次，有可能不出现
let R = /a{3}/ // 表示"a" 连续出现3次
let R = /\d{1,5}/ // 表示数字连续出现1到5次
let R = /c+/ // 表示至少要有一个"c"
2. Coincidencia codiciosa y perezosa (usando ejemplos del libro)
coincidencia codiciosa
let regex = /\d{2,5}/g;
let string = "123 1234 12345 123456";
console.log( string.match(regex) );
// => ["123", "1234", "12345", "12345"]
// 其中正则 /\d{2,5}/，表示数字连续出现 2 到 5 次。会匹配 2 位、3 位、4 位、5 位连续数字
// 但是其是贪婪的，它会尽可能多的匹配。你能给我 6 个，我就要 5 个。你能给我 3 个，我就要 3 个。
// 反正只要在能力范围内，越多越好
emparejamiento perezoso
let regex = /\d{2,5}?/g;
let string = "123 1234 12345 123456";
console.log( string.match(regex) );
// => ["12", "12", "34", "12", "34", "12", "34", "56"]
// 其中 /\d{2,5}?/ 表示，虽然 2 到 5 次都行，当 2 个就够的时候，就不再往下尝试了
La coincidencia diferida se puede lograr agregando un signo de interrogación después del cuantificador. El método de memoria para la coincidencia diferida es: agregue un signo de interrogación después del cuantificador y pregunte si está satisfecho, ¿es codicioso?
惰性量词: 贪婪量词:
{m,n}? {m,n}
{m,}? {m,}
?? ?
+? +
*? *
3. rama
Un patrón puede lograr una coincidencia difusa horizontal y vertical. La rama de opción múltiple puede admitir múltiples submodos para elegir uno de ellos.
La forma específica es la siguiente: (p1|p2|p3), donde p1, p2 y p3 son subpatrones, separados por | (símbolo de tubería), lo que significa cualquiera de ellos.
// 例如要匹配字符串"vue"和"react" 可以使用 /vue|react/
let R = /vue|react/g
let str = "vue and react"
console.log(str.match(R))
// ['vue', 'react']
La estructura de la rama también es una coincidencia diferida: cuando la anterior coincide, la última ya no coincidirá. como sigue
// 上面的例子改为去匹配"vue and vuex"
let R1 = /vue|vuex/g
let str1 = "vuex"
console.log(str1.match(R1))
// ['vue']
let R2 = /vuex|vue/g
let str2 = "vuex"
console.log(str2.match(R2))
// ['vuex']
4. Análisis de casos
Ejemplo 1. Coincidencia de valores de color hexadecimales
Requerido para coincidir:
#ffbbad
#Fc01DF
#FFF
#ffE
Análisis:
para representar un carácter hexadecimal, puede usar el grupo de caracteres [0-9a-fA-F], donde el carácter puede aparecer 3 o 6 veces, y necesita usar cuantificadores y estructuras de rama.
Al utilizar estructuras ramificadas, es necesario prestar atención al orden (pereza)
expresión regular:
var regex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g;
var string = "#ffbbad #Fc01DF #FFF #ffE";
console.log( string.match(regex) );
// => ["#ffbbad", "#Fc01DF", "#FFF", "#ffE"]
Ejemplo 2. Tiempo de coincidencia
Tomando como ejemplo el reloj de 24 horas, es necesario hacer coincidir:
23:59
02:07
analizar:
Un total de 4 dígitos, el primer dígito puede ser [0-2], cuando el primer dígito es "2", el segundo dígito puede ser [0-3], en otros casos, el segundo dígito puede ser [0-9 ] ]
El tercer dígito es [0-5], el cuarto dígito es [0-9]
expresión regular:
var regex = /^[01][0-9]|2[0-3]:[0-5][0-9]$/;
console.log( regex.test("23:59") ); // true
console.log( regex.test("02:07") ); // true
^ y $ se usan en el patrón regular para indicar el principio y el final de la cadena respectivamente, y el signo de intercalación se usa en el grupo de caracteres para indicar la inversión del grupo de caracteres antónimos.
Si también se requiere que coincida con "7:9", es decir, se puede omitir el "0" delante de la hora.
var regex = /^(0?[0-9]|1[0-9]|[2][0-3]):(0?[0-9]|[1-5][0-9])$/;
console.log( regex.test("23:59") ); // true
console.log( regex.test("02:07") ); // true
console.log( regex.test("7:9") ); // true
Ejemplo 3. Fechas coincidentes
Por ejemplo, se requiere que el formato aaaa-mm-dd coincida:
2017-06-10
Análisis: año de 4 dígitos, se puede representar como [0-9]{4} mes de 2 dígitos por
grupo de caracteres más cuantificador , dividido en dos casos, 01 02 03 04... 10 11 12, más rama para representar 0 [1-
9]|1[0-2]
día con 2 dígitos, el número máximo es 31, que se puede expresar como 0[1-9]|[12][0-9]|3[01]
expresión regular:
var regex = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;
console.log( regex.test("2017-06-10") ); // true
Ejemplo 4. La ruta del archivo del sistema operativo Windows
es vergonzosa, esta pregunta es confusa, la publicaré todo directamente...
requerido para coincidir:
F:\study\javascript\regex\regular expression.pdf
F:\study\javascript\regex\
F:\study\javascript
F:\
Análisis:
El patrón general es: letra de unidad:\carpeta\carpeta\carpeta
que coincide con "F:", debe usar [a-zA-Z]:\, donde la letra de unidad no distingue entre mayúsculas y minúsculas, tenga en cuenta que \ el personaje necesita convertirse en justo.
El nombre del archivo o de la carpeta no puede contener algunos caracteres especiales. En este momento, debemos excluir el grupo de caracteres [^\: <>|"? \r\n/] para representar caracteres legales.
Además, sus nombres no pueden ser vacío, al menos Hay un carácter, es decir, para usar el cuantificador +, por lo tanto, para hacer coincidir la carpeta \, puede usar [^\: <>|“?\r\n/]+\ .
Además, la carpeta \ puede aparecer tantas veces como desee. Es decir ([^\: <>|"?\r\n/]+\) . Los corchetes indican que su regularidad interna es un todo. Para más detalles, consulte el Capítulo 3. (Es posible que todavía haya posturas que no se han aprendido...)
La última parte de la ruta puede ser una carpeta sin \, por lo que es necesario agregar ([^\:*<>|”?\r\n/]+)?.
Al final, se empalma en una regularidad más complicada:
var regex = /^[a-zA-Z]:\\([^\\:*<>|"?\r\n/]+\\)*([^\\:*<>|"?\r\n/]+)?$/;
console.log( regex.test("F:\\study\\javascript\\regex\\regular expression.pdf") );
console.log( regex.test("F:\\study\\javascript\\regex\\") );
console.log( regex.test("F:\\study\\javascript") );
console.log( regex.test("F:\\") );
// => true
// => true
// => true
// => true
Entre ellos, cuando la cadena debe representar el carácter \ en JavaScript, también debe escaparse.
Ejemplo 5. ID de coincidencia
solicitud de
Extraer id="contenedor".Análisis:
es más fácil pensar en escribir expresiones regulares basadas en el formato "id = xxx", por ejemplo: /id=".*"/, pero debido a la coincidencia codiciosa y perezosa de las expresiones regulares, * es un cuantificador codicioso cuando encuentre comillas dobles detrás del
contenedor, no se detendrá y continuará coincidiendo hasta que se encuentre la última comilla doble
let regex = /id=".*"/
let string = '<div id="container" class="main"></div>';
console.log(string.match(regex)[0]);
// => id="container" class="main"
¿El cuantificador codicioso plus? Cambie a cuantificadores perezosos para resolver el problema.
let regex = /id=".*?"/
let string = '<div id="container" class="main"></div>';
console.log(string.match(regex)[0]);
// => id="container"
V. Resumen
Con respecto a la coincidencia de cadenas normal, lo principal es dominar los grupos de caracteres, los cuantificadores y las estructuras de rama, y luego comprender la coincidencia perezosa y codiciosa. Básicamente, se puede realizar la mayor parte de la coincidencia de caracteres
. Actualizaré más conocimientos sobre expresiones regulares en el futuro. Si te gusta, puedes prestarle atención o ir directamente al "Mini libro de expresiones regulares de JavaScript"
de Yao丨Insight Producer antes . aprender otros materiales habituales. En comparación con el minilibro, es más sencillo y fácil de entender; a diferencia de otros materiales, no tienes ningún deseo de aprender después de leer un párrafo.