1. Empieza por lo más sencillo
Hay una cadena: "1-apple"
necesita analizar 1 y apple, y la expresión regular correspondiente es muy simple: ^(\d)-(.+)$
entre ellos,
^significa el comienzo de la cadena, y luego el contenido entre paréntesis significa un "grupo". : (\d)significa un grupo de números, (.+)lo que indica que es un grupo de valores arbitrarios; $indica el final de la cadena.
Código correspondiente:
const str = "1-apple"
const regexp = /^(\d)-(.+)$/
let match = regexp.exec(str)
console.log(match[0])
console.log(match[1])
console.log(match[2])
Tenga en cuenta que aunque solo hay dos paréntesis, hay tres valores de retorno regulares:
partido[0] = 1-manzana
partido[1] = 1
partido[2] = manzana
match[0] devuelve una coincidencia completa cuyo valor es str en sí mismo. Obviamente, match[0] es inútil en este ejemplo, porque lo que realmente queremos analizar son match[1] y match[2].
2. Repita la agrupación de patrones
Si hay patrones repetidos (patrón) en la cadena, como esta situación:
1-manzana
2-naranja
3-pera
Las tres líneas de texto anteriores, aunque el contenido es diferente, pero la ley es la misma, es decir, cada línea Es: ( 数字)-( 任意值)
para que podamos usar una expresión regular para hacer coincidir estas 3 líneas de texto, tenga en cuenta que gmel identificador debe agregarse más tarde (g significa global, m significa multilínea), el código es como sigue:
const str = "1-apple\n2-orange\n3-pear"
const regexp = /^(\d)-(.+)$/gm //注意：和上例相比，唯一的区别是后面加了gm标志
let match = regexp.exec(str)
console.log(match[0])
console.log(match[1])
console.log(match[2])
resultado de la operación:
partido[0] = 1-manzana
partido[1] = 1
partido[2] = manzana
Solo se analiza 1 manzana , entonces, ¿cómo analizamos 2 naranjas y 3 peras ?
Modifiquemos un poco el código:
const str = "1-apple\n2-orange\n3-pear"
const regexp = /^(\d)-(.+)$/gm
let match
match = regexp.exec(str) // 第1次触发
console.log(match[0])
console.log(match[1])
console.log(match[2])
match = regexp.exec(str) // 第2次触发
console.log(match[0])
console.log(match[1])
console.log(match[2])
match = regexp.exec(str) // 第3次触发
console.log(match[0])
console.log(match[1])
console.log(match[2])
resultado de la operación:
1 manzana
1
manzana
2-naranja
2
naranja
3 peras
3
peras
En este ejemplo, hemos disparado match = regexp.exec(str)esta línea de declaraciones tres veces seguidas,
de hecho, aunque las declaraciones son exactamente iguales, el valor de retorno de cada coincidencia es diferente. Con gmel identificador, el método .exec guardará la posición del primer carácter del valor coincidente actual en la variable de índice (nota: no existe gmtal variable sin el identificador), y cuando se activa .exec la próxima vez, el índice no se inicia desde 0 En lugar de buscar, la segunda coincidencia se realiza desde la posición posterior a la finalización de la primera coincidencia, y así sucesivamente, hasta que coincida todo el carácter.
Sabiendo que el método .exec puede ejecutar este pequeño secreto repetidamente, es muy sencillo cambiar el código nuevamente:
const str = "1-apple\n2-orange\n3-pear"
const regexp = /^(\d)-(.+)$/gm //注意：和上例相比，唯一的区别是后面加了gm标志
let match
while ((match = regexp.exec(str)) !== null) {
console.log('index = ', match.index)
console.log('result = ', match[0], match[1], match[2])
}
resultado de la operación:
índice = 0
resultado = 1-manzana 1 manzana
índice = 8
resultado = 2-naranja 2 naranja
índice = 17
resultado = 3-pera 3 pera
Alternativamente, también podemos enviar los resultados a una matriz bidimensional por conveniencia:
const str = "1-apple\n2-orange\n3-pear"
const regexp = /^(\d)-(.+)$/gm
let match
let matches = []
while ((match = regexp.exec(str)) !== null) {
matches.push(match)
}
console.log(matches[0][1]) // 显示：1
console.log(matches[0][2]) // 显示：apple
console.log(matches[1][1]) // 显示：2
console.log(matches[1][2]) // 显示：orange
console.log(matches[2][1]) // 显示：3
console.log(matches[2][2]) // 显示：pear
3. debut de matchAll
Si no le gusta el bucle while, también puede usar matchAll, por lo que no tiene que usar el bucle while más exec. El uso de matchAll obtendrá el valor de retorno de un iterador, y puede ser más conveniente realizar la función con for...of, array spread o Array.from().
const str = "1-apple\n2-orange\n3-pear"
const regexp = /^(\d)-(.+)$/gm
const matches = str.matchAll(regexp) // 采用matchAll进行匹配
for (const match of matches) {
// 采用 for of 方式读取
console.log('index = ', match.index)
console.log('result = ', match[0], match[1], match[2])
}
Este código tiene exactamente el mismo efecto que el ejemplo anterior.
Alternativamente, también podemos usar Array.from() para lograr el mismo efecto:
const str = "1-apple\n2-orange\n3-pear"
const regexp = /^(\d)-(.+)$/gm
const matches = str.matchAll(regexp)
Array.from(matches, (match) => {
// 采用 Array.from方式读取
console.log('index = ', match.index)
console.log('result = ', match[0], match[1], match[2])
})
O la sintaxis de "tres puntos" de ES6 más simple (distribución de matriz):
const str = "1-apple\n2-orange\n3-pear"
const regexp = /^(\d)-(.+)$/gm
const matches = [...str.matchAll(regexp)] // 采用 ... 方式展开str.matchAll(regexp)
// 遍历数组
for (let i = 0; i < matches.length; i++) {
console.log('index = ', matches[i].index)
console.log('result = ', matches[i][0], matches[i][1], matches[i][2])
}
Los tres puntos se denominan "distribución de matriz" o "sintaxis de expansión". Tiene muchas y complicadas funciones. Cuando no hay sintaxis de expansión, solo puede usar empujar, empalmar, concatenar y otros métodos en combinación para convertir elementos de matriz existentes en nuevos arreglos una parte de. Con la sintaxis de expansión, la construcción de nuevas matrices se vuelve más simple y elegante a través de métodos literales, como:
const str = "1-apple\n2-orange\n3-pear"
const regexp = /^(\d)-(.+)$/gm
const matches = [...str.matchAll(regexp)] // 采用 ... 方式展开str.matchAll(regexp)
console.log(matches[0][1]) // 显示：1
console.log(matches[0][2]) // 显示：apple
console.log(matches[1][1]) // 显示：2
console.log(matches[1][2]) // 显示：orange
console.log(matches[2][1]) // 显示：3
console.log(matches[2][2]) // 显示：pear
Después de expandir los tres puntos "..." str.matchAll(regexp), obtendremos directamente una matriz bidimensional sin operaciones de inserción adicionales, que es más simple e intuitiva que el método presentado anteriormente.
Cuatro Posdata
Este artículo solo enumera casos básicos muy simples sobre la agrupación regular. Para una mayor investigación, puede leer la siguiente información:
【matchAll()详解】：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll
[Explicación detallada de la sintaxis de distribución de matrices]:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax