Expresiones regulares de JavaScript, este artículo es suficiente.

Cómo comenzar rápidamente con VUE3.0: Ingrese al aprendizaje

Recomendaciones relacionadas: Tutorial de JavaScript

¿Qué es una expresión regular?

La expresión regular ( Expresión regular, denominada expresión regular )

• es una regla gramatical que describe la estructura de una cadena.
• Es un patrón de formato específico que se utiliza para verificar si varias cadenas coinciden con esta característica, lo que permite la búsqueda avanzada de texto, el reemplazo, la interceptación de contenido y otras operaciones.

Aplicación: en el desarrollo de proyectos, funciones como ocultar dígitos específicos de números de teléfonos móviles, recopilación de datos, filtrado de palabras confidenciales y verificación de formularios se pueden implementar mediante expresiones regulares.

Campos aplicables: En sistemas operativos (Unix, Linux, etc.), lenguajes de programación (C, C++, Java, PHP, Python, JavaScript, etc.).

Por ejemplo: tome la búsqueda de texto como ejemplo, si encuentra una cadena que coincide con una determinada característica (como un número de teléfono móvil) en una gran cantidad de texto, escriba esta característica de acuerdo con la sintaxis de una expresión regular para formar una. patrón reconocido por el programa de computadora (Patrón), y luego el programa de computadora hará coincidir el texto de acuerdo con este patrón para encontrar la cadena que cumpla con las reglas.

La historia de las expresiones regulares.

Forma de expresión de expresión regular.

• Una es una expresión regular compatible con la especificación POSIX que se utiliza para garantizar la portabilidad entre sistemas operativos.
• Una es que cuando se desarrolló Perl (un lenguaje de programación rico en funciones), se derivaron expresiones regulares de Perl. La sintaxis regular en JavaScript se basa en Perl.

Cómo utilizar expresiones regulares

Durante el desarrollo, a menudo es necesario buscar y hacer coincidir cadenas específicas basándose en patrones de coincidencia regulares.

Método exec()

• El método exec() se utiliza para buscar coincidencias en la cadena de destino y devuelve solo un resultado coincidente a la vez.
• Por ejemplo, busque abc en la cadena especificada str.

• "/" en "/abc/i" es el delimitador de la expresión regular, "abc" representa el texto del patrón de la expresión regular y "i" es el identificador de modificación del patrón, lo que significa que se ignora el caso en str.
• El parámetro del método exec () es la cadena str que se va a buscar. Cuando la coincidencia es exitosa, el valor de retorno de este método es una matriz; de lo contrario, devuelve nulo.
• Se puede ver en el resultado de retorno de exec () que el primer elemento (AbC) guardado en la matriz representa la cadena coincidente, el índice del segundo elemento representa el valor de índice del carácter coincidente en la cadena de destino (desde 0) ; la entrada del tercer parámetro representa la cadena de destino (AbC123abc456).

Método match()

Además de recuperar el valor especificado en la cadena, el método match() en el objeto String también puede hacer coincidir todo el contenido que cumpla con los requisitos en la cadena de destino de acuerdo con las reglas habituales y guardarlo en una matriz después del la coincidencia es exitosa, devuelve falso si la coincidencia falla.

• El localizador "^" se puede utilizar para hacer coincidir el comienzo de una cadena.
• El localizador "$" se puede utilizar para hacer coincidir el final de una cadena.
• g representa una coincidencia global, que se utiliza para continuar la búsqueda después de encontrar la primera coincidencia.

Obtener un objeto normal

En una aplicación JavaScript, primero debe crear un objeto normal antes de utilizar expresiones regulares. Además de la creación literal explicada anteriormente, también se puede crear a través del constructor del objeto RegExp.

• patrón es un texto de patrón de expresión regular compuesto de metacaracteres y caracteres literales.
• Los metacaracteres son caracteres con significados especiales, como "^", "." o "*".
• Los caracteres de texto son texto normal, como letras y números.
• Flags representa el identificador de modificación del patrón, que se utiliza para configurar aún más la expresión regular.
  
  

• Los modificadores de modo también se pueden utilizar en múltiples combinaciones según las necesidades reales.
• Por ejemplo, para ignorar mayúsculas y minúsculas y hacer coincidir globalmente, puede usar gi directamente y no hay ningún requisito de orden al escribir múltiples modificadores de patrón.
• Por lo tanto, el uso razonable de modificadores de patrón puede hacer que las expresiones regulares sean más concisas e intuitivas.

Para permitir que los lectores comprendan mejor la adquisición de objetos regulares, se dará una explicación comparativa tomando como ejemplo la coincidencia de los caracteres especiales "^", "$", "*", "."

• El selector "|" significa "o", y la condición de búsqueda se puede establecer siempre que se cumpla una de las condiciones.
• Hay un problema de escape con cadenas en JavaScript, por lo que "" en str en el código representa una barra invertida "".
• Al hacer coincidir caracteres especiales en expresiones regulares, también se necesitan barras invertidas () para escapar de los caracteres especiales. Por ejemplo, "\" se convierte en "" después del escape de la cadena, y luego la expresión regular usa "" para coincidir con "".

Tenga en cuenta que,

aunque los objetos normales creados por el método constructor y el método literal tienen funciones completamente idénticas, tienen ciertas diferencias en la implementación de sintaxis. El primer patrón necesita escapar de la barra invertida () cuando se usa. Al escribir el último patrón, debe colocarse dentro del delimitador "/" y la etiqueta de banderas debe colocarse fuera del delimitador final.

de las categorías de caracteres

: el uso eficaz de las categorías de caracteres puede hacer que las expresiones regulares sean más concisas y fáciles de leer.

Ejemplo 1: Las letras mayúsculas, minúsculas y números se pueden representar directamente usando "w".

Caso 2: Si desea hacer coincidir números entre 0 y 9, puede usar "d".

Para facilitar la comprensión de los lectores sobre el uso de categorías de caracteres, a continuación se utilizan "." y "s" como ejemplos de demostración.

• El registro de objeto normal se utiliza para hacer coincidir dos caracteres cualesquiera después de un carácter de espacio en blanco (excepto las nuevas líneas).
• Por lo tanto, en los resultados vistos en la consola, hay un espacio antes del id.

conjunto de caracteres

Representación de juegos de caracteres: "[]" puede implementar un juego de caracteres.

Rango de caracteres: cuando se usa junto con el guión "-", significa hacer coincidir caracteres dentro del rango especificado.

Caracteres antónimos: cuando el metacarácter "^" se utiliza junto con "[]", se denomina carácter antónimo.

No dentro de un rango determinado: "^" se usa junto con "[]" para hacer coincidir caracteres que no están dentro del rango de caracteres especificado.

Tome la cadena 'get好TB6'.match(/pattern/g) como ejemplo para demostrar su uso común.

Tenga en cuenta

que el carácter "-" generalmente solo representa un carácter ordinario y solo se

usa como metacarácter cuando representa un rango de caracteres. El rango representado por el guión "-" sigue la secuencia de codificación de caracteres. Por ejemplo, "aZ", "za" y "a-9" son todos rangos ilegales.

[Caso] Limitar el contenido de entrada

Idea de implementación del código :

escriba HTML, establezca un cuadro de texto para el año (año) y el mes (mes) y un botón de consulta.

Obtenga el elemento objeto de la operación y verifique el envío del formulario.

Verifique el año, forma regular: /^d{4}/. Verifique el mes, regla regular: / ( ( 0 ? [ 1 − 9 ] ) ∣ ( 1 [ 012 ] ) ) /.

El cuadro de texto recibe el foco y se elimina el color del cuadro de aviso. El cuadro de texto pierde el foco, elimina los espacios en blanco en ambos extremos del contenido de entrada y se valida.

Implementación de código

	
	
	
	
	
	
	entrada[tipo=texto]{ancho: 40px;color del borde: #bbb;alto: 25px;tamaño de fuente: 14px;radio del borde: 2px;contorno: 0;borde: #ccc 1px sólido;relleno: 0 10px; -webkit-transition: box-shadow .5s;margen-inferior: 15px;}
	entrada[tipo=texto]:desplazar el cursor, entrada[tipo=texto]:enfoque,entrada[tipo=enviar]:desplazar el cursor{borde: 1px sólido #56b4ef; cuadro-sombra: inserción 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 {color: #999; -webkit-transition: color .5s;}
	entrada:enfoque::-webkit-input-placeholder, entrada:hover::-webkit-input-placeholder {color: #c2c2c2; -webkit-transition: color .5s;}
	entrada[tipo=enviar]{alto: 30px; ancho: 80px; fondo: #4393C9; borde:1px sólido #fff;color: #fff;fuente:14px más negrita;
	
	
	
	
	Año
	Mes
	
	
	

	
	función verificarAño(obj) {
	si (!obj.value.match(/^d{4}$/)) {
	obj.style.borderColor = 'rojo';
	result.innerHTML = 'Error de entrada, el año está representado por 4 dígitos';
	devolver falso;
	}
	resultado.innerHTML = '';
	devolver verdadero;
	}
	función verificarMes(obj) {
	si (!obj.value.match(/^((0?[1-9])|(1[012]))$/)) {
	obj.style.borderColor = 'rojo';
	result.innerHTML = 'Error de entrada, el mes está entre 1 y 12';
	devolver falso;
	}
	resultado.innerHTML = '';
	devolver verdadero;
	}
	var form = document.getElementById('form'); // 
 elemento objeto var resultado = document.getElementById('result'); // 
 elemento objeto var inputs = document.getElementsByTagName('input'); //  colección de elementos form.onsubmit = function() {
	return checkYear(entradas.año) && checkMonth(entradas.mes);
	};
	entradas.año.onfocus = función() {
	this.style.borderColor = '';
	};
	entradas.mes.onfocus = función() {
	this.style.borderColor = '';
	};
	si (!String.prototype.trim) {
	String.prototype.trim = función() {
	return this.replace(/^[suFEFFxA0]+|[suFEFFxA0]+$/g, '');
	// uFEFF marca de orden de bytes; xA0 no envuelve espacios en blanco };
	}
	entradas.año.onblur = función() {
	este.valor = este.valor.trim();
	comprobarAño(este);
	};
	entradas.mes.onblur = función() {
	este.valor = este.valor.trim();
	comprobarMes(este);
	};
	
	
	

método test() en la clase RegExp

: detecta si la expresión regular coincide con la cadena especificada.

Cuando la coincidencia es exitosa, el valor de retorno del método test() es verdadero; de lo contrario, devuelve falso.

Detección de modificadores de patrón de objetos normales

También hay algunas propiedades en la clase RegExp que se utilizan para detectar los modificadores de patrón utilizados por el objeto normal actual y especificar el índice inicial de la siguiente coincidencia.

Para que los lectores comprendan mejor el uso de estos atributos, a continuación se utiliza la coincidencia de espacios como ejemplo para demostrarlo.

El método search() en la clase String

: puede devolver la posición donde aparece por primera vez la subcadena del patrón especificado en la cadena. Es más poderoso que el método indexOf().

• El parámetro del método search() es un objeto de expresión regular. Si se pasa un objeto de expresión no regular, se convertirá implícitamente en un objeto de expresión regular usando "nueva expresión regular (parámetro pasado)".
• El valor de retorno del método search() después de una coincidencia fallida es -1.

Método split() : se utiliza para dividir una cadena en una matriz de cadenas según el delimitador especificado. La matriz de cadenas divididas no incluye el delimitador.

Cuando hay más de un delimitador, es necesario definir un objeto normal para completar la operación de división de cadenas.

• Divida según los delimitadores "@" y "." en la cadena.
• El parámetro del método split() es el delimitador establecido por el modo de expresión regular y el valor de retorno es el resultado de la división guardado en forma de matriz.

Tenga en cuenta que

cuando la cadena está vacía, el método split() devuelve una matriz "[""]" que contiene una cadena vacía. Si la cadena y el delimitador son cadenas vacías, se devuelve una matriz vacía "[]".

• Al utilizar la coincidencia normal para dividir una cadena, también puede especificar el número de divisiones de cadena.
• Después de especificar el número de divisiones de cadena, si el número especificado es menor que el número de divisiones que cumplen con las reglas en la cadena real, otros resultados de división se ignorarán en el resultado final devuelto.

Verificación

práctica

Condiciones de verificación de la seguridad de la contraseña:

① Longitud <6 dígitos, sin seguridad de la contraseña.

②La longitud es >6 caracteres y contiene números, letras u otros caracteres, y la seguridad de la contraseña es "baja".

③La longitud es >6 caracteres y contiene dos tipos de números, letras u otros caracteres. La seguridad de la contraseña es "media".

④ Si la longitud es >6 caracteres y contiene tres o más tipos de números, letras u otros caracteres, la seguridad de la contraseña es "Alta".

Calificador de caracteres

: el calificador

hace una pregunta: Coincide con un carácter consecutivo, como 6 dígitos consecutivos "458925".

Solución 1: Objeto normal/dddddd/gi.

Problemas: El "d" repetido no es fácil de leer y complicado de escribir.

Solución 2: utilice calificadores (?, +, *, { }) para completar la coincidencia de apariciones consecutivas de un determinado carácter. Objeto normal/d{6}/gi.

Calificación de caracteres: coincidencia codiciosa y perezosa

Cuando se utiliza el carácter de punto (.) con el calificador, puede coincidir con cualquier carácter en el rango de números especificado.

• Ejemplo: "^hola.*mundo$".
• Descripción: Puede hacer coincidir cadenas que comienzan con hola y terminan en mundo, y que contienen cero o más caracteres arbitrarios en el medio.

Las expresiones regulares admiten coincidencias codiciosas y diferidas cuando coinciden con cualquier carácter dentro de un rango específico.

• El llamado codicioso significa hacer coincidir tantos caracteres como sea posible, mientras que perezoso significa hacer coincidir la menor cantidad de caracteres posible. De forma predeterminada, se utiliza la coincidencia codiciosa.
• Si desea lograr una coincidencia diferida, debe agregar el símbolo "?" después del calificador anterior.

Caracteres entre corchetes

En expresiones regulares, el contenido encerrado entre los caracteres entre corchetes "()" se denomina "subexpresión".

efecto

Los paréntesis implementan la coincidencia de catch y catering, y si no se usan, se convierte en catch y er.

Cuando no está agrupado, significa hacer coincidir 2 caracteres c; después de agrupar, significa hacer coincidir 2 cadenas "bc";

Captura con y sin captura

: el proceso de almacenar el contenido que coincide con una subexpresión en el área de caché del sistema.

Sin captura: no almacene el contenido coincidente de la subexpresión en la memoria caché del sistema; utilice (?:x) para lograrlo.

El método reemplazar () del objeto String puede usar directamente $ n (n es un entero positivo mayor que 0) para obtener el contenido capturado y completar la operación de reemplazar el contenido capturado por la subexpresión.

• El primer parámetro es una expresión regular, que se utiliza para hacer coincidir la cadena str y reemplazar el contenido que cumple con las reglas con el contenido establecido por el segundo parámetro.
• $2 representa el contenido "Captura" capturado por la segunda subexpresión en la expresión regular reg.
• $1 representa el contenido "Regular" capturado por la primera subexpresión.
• El valor de retorno es la nueva cadena después del reemplazo, por lo que el contenido de la cadena original no se modificará.

Puede utilizar "(?:x)" para lograr una coincidencia sin captura

Referencia anterior

Al escribir una expresión regular, si desea obtener el contenido capturado de la subexpresión almacenada en el área de caché en la expresión regular, puede usar "n" (n es un número entero positivo mayor que 0, esta referencia). El proceso es "referencia inversa".

• "1" representa el contenido capturado de la primera subexpresión.
• "2" representa el contenido capturado de la segunda subexpresión, y así sucesivamente.

• "d" se utiliza para hacer coincidir cualquier número entre 0 y 9.
• Después de agregarle paréntesis "()", el contenido capturado se puede obtener a través de la referencia anterior.
• Por lo tanto, los resultados finales del emparejamiento son 333 y 666.

aserción de ancho cero

Aserción de ancho cero : se refiere a una coincidencia de subexpresión de ancho cero, que se utiliza para encontrar si el contenido que coincide con la subexpresión contiene un conjunto de caracteres específico antes o después.

Clasificación: se divide en captación previa directa y captación previa inversa, pero JavaScript solo admite la captación previa directa, es decir, los datos coincidentes antes de que contengan o no el contenido capturado, y los resultados coincidentes no contengan el contenido capturado.

Precedencia de operadores regulares

Hay muchos operadores en las expresiones regulares. En la aplicación real, se emparejarán varios operadores según el orden de precedencia. La precedencia de los operadores comúnmente utilizados en expresiones regulares, en orden de mayor a menor, es la siguiente.

[Caso] Búsqueda y sustitución de contenidos

Idea de implementación de código :

• escriba HTML y defina dos campos de texto, uno para la entrada del usuario y el otro para mostrar contenido filtrado reemplazado según sea necesario.
• Siempre que la entrada del usuario contenga caracteres chinos incorrectos o cualquier carácter, utilice * para reemplazarlo.
• Busque y reemplace la regla de contenido: /(bad)|[u4e00-u9fa5]/gi.

Implementación de código

	
	
	
	
	
	
	p{flotador:izquierda;}
	entrada {margen: 0 20px;}
	
	
	
	
Contenido antes de filtrar:

	
	
	
	
Contenido filtrado:

	
	
	
	document.getElementById('btn').onclick = función () {
	// Definir las reglas de contenido que deben buscarse y reemplazarse [u4e00-u9fa5] significa hacer coincidir cualquier carácter chino var reg = /(bad)|[u4e00-u9fa5]/gi;
	var str = document.getElementById('pre').valor;
	var noticiastr = str.replace(reg, '*');
	document.getElementById('res').innerHTML = noticiastr;
	};
	
	
	

Recomendaciones relacionadas: Tutorial de aprendizaje de JavaScript

. Lo anterior son expresiones regulares de JavaScript. Este artículo es suficiente para obtener más información, preste atención a otros artículos relacionados en el sitio web chino de PHP.