Cómo comenzar rápidamente con VUE3.0: Ingrese al aprendizaje
Recomendaciones relacionadas: Tutorial de JavaScript
La expresión regular ( Expresión regular, denominada expresión regular )
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.
Durante el desarrollo, a menudo es necesario buscar y hacer coincidir cadenas específicas basándose en patrones de coincidencia regulares.
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.
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.
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 "^", "$", "*", "."
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.
Beneficios: 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.
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
<!DOCTYPE html>
<html>
<cabeza>
<meta juego de caracteres="UTF-8">
<title>Limitar contenido de entrada</title>
<estilo>
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;
</estilo>
</cabeza>
<cuerpo>
<id de formulario="formulario">
Año<tipo de entrada="texto" nombre="año">
Mes<tipo de entrada="texto" nombre="mes">
<tipo de entrada="enviar" valor="consulta">
</formulario>
<p id="resultado"></p>
<guión>
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'); // <form> elemento objeto var resultado = document.getElementById('result'); // <p> elemento objeto var inputs = document.getElementsByTagName('input'); // <entrada> 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);
};
</script>
</cuerpo>
</html> El : 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.
: 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().
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.
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 "[]".
Verificación
práctica
de la seguridad de la contraseñaCondiciones 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".
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.
Cuando se utiliza el carácter de punto (.) con el calificador, puede coincidir con cualquier carácter en el rango de números especificado.
Las expresiones regulares admiten coincidencias codiciosas y diferidas cuando coinciden con cualquier carácter dentro de un rango específico.
En expresiones regulares, el contenido encerrado entre los caracteres entre corchetes "()" se denomina "subexpresión".
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";
: 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.
Puede utilizar "(?:x)" para lograr una coincidencia sin captura
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".
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.
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 :
Implementación de código
<!DOCTYPE html>
<html>
<cabeza>
<meta juego de caracteres="UTF-8">
<title>Búsqueda y sustitución de contenidos</title>
<estilo>
p{flotador:izquierda;}
entrada {margen: 0 20px;}
</estilo>
</cabeza>
<cuerpo>
<p>Contenido antes de filtrar:<br>
<textarea id="pre" filas="10" cols="40"></textarea>
<entrada id="btn" tipo="botón" valor="filtro">
</p>
<p>Contenido filtrado:<br>
<textarea id="res" filas="10" cols="40"></textarea>
</p>
<guión>
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;
};
</script>
</cuerpo>
</html> 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.
