Introducción

Las expresiones regulares se utilizan ampliamente en varios lenguajes de programación. Es aún más indispensable en JavaScript. Las expresiones regulares se usan generalmente para recuperar y reemplazar texto que cumple con un patrón determinado (regla). Por ejemplo, el formulario de verificación: el formulario de nombre de usuario solo puede ingresar letras, números o guiones bajos en inglés, y el cuadro de ingreso de apodo puede ingresar chino. Además, las expresiones regulares se utilizan a menudo para filtrar algunas palabras sensibles en el contenido de la página (reemplazo), o para obtener partes específicas que queremos de una cadena (extracto), etc. Este artículo comienza con los conceptos básicos de las expresiones regulares, explica las características y la composición de las expresiones regulares, explica en detalle el uso de las expresiones regulares en JavaScript y ofrece algunos ejemplos que se utilizan a menudo en el desarrollo real.

Tabla de contenido

Introducción

1 expresión regular

1.1 ¿Qué es una expresión regular?

1.2 El papel de las expresiones regulares

1.3 Características de las expresiones regulares

1.4 La composición de expresiones regulares

1.5 Metastring

1.5.1 Metastrings de uso común

1.5.2 Calificador

1.5.3 Otro

2 Expresiones regulares de uso común

3 Utilice expresiones regulares en JavaScript

3.1 Crear un objeto de expresión regular

3.1.1 Método 1

3.1.2 Método 2:

3.2 Parámetros

3.3 Coincidencia de expresiones regulares

3.4 Ejemplos

3.4.1 Verificar la seguridad de la contraseña

3.4.2 Verificar correo electrónico

3.4.3 Verificar el nombre chino

3.5 Extracción de expresiones regulares

3.6 Reemplazo de expresiones regulares

4 caso

4.1 Caso de validación de formulario

4.2 Filtrado de casos de palabras sensibles

5 Resumen

1 expresión regular

1.1 ¿Qué es una expresión regular?

Las expresiones regulares son expresiones que se utilizan para coincidir con las reglas regulares. Su "origen" se remonta a las primeras investigaciones de los científicos sobre el principio de funcionamiento del sistema nervioso humano. Ahora, en varios lenguajes de programación, las expresiones regulares se utilizan ampliamente. En JavaScript, las expresiones regulares también son objetos, y las tablas regulares generalmente se usan para recuperar y reemplazar texto que cumple con un patrón determinado (regla).
La expresión regular es una especie de fórmula lógica para la manipulación de cadenas. Utiliza algunos caracteres específicos predefinidos y la combinación de estos caracteres específicos para formar una "cadena de reglas". Esta "cadena de reglas" se utiliza para expresar el par de caracteres. Una lógica de filtrado para cadenas.

1.2 El papel de las expresiones regulares

Si la cadena dada cumple con la lógica de filtrado de expresiones regulares (coincidencia).
Podemos obtener la parte específica que queremos de la cadena (extracto) mediante expresiones regulares.
Potente capacidad de reemplazo de cuerdas (reemplazo).

1.3 Características de las expresiones regulares

La flexibilidad, la lógica y la funcionalidad son muy fuertes
El complejo control de la cuerda se puede lograr rápidamente de una manera muy simple
Es más oscuro para las personas que son nuevas contactar

1.4 La composición de expresiones regulares

Caracteres normales
Caracteres especiales (metacaracteres): caracteres con un significado especial en expresiones regulares

Demostración de muestra:

\d Números coincidentes
ab\d Coincidir ab1, ab2

1.5 Metastring

1.5.1 Metastrings de uso común

Metacarácter	Descripción
\re	Números coincidentes
\RE	Coincidir con cualquier carácter que no sea un dígito
\ w	Coincidir con letras, números o guiones bajos
\ W	Coincide con cualquier cosa que no sea una letra, número o guión bajo
\ s	Coincide con cualquier espacio en blanco
\ S	Coincide con cualquier carácter que no sea un espacio en blanco
.	Coincidir con cualquier carácter único excepto nueva línea
^	Indica el texto al comienzo de la línea de coincidencia (quién comienza con)
PS	Indica el texto al final de la línea coincidente (termina con quién)

1.5.2 Calificador

Calificatorio	Descripción
*	Repetir cero o más veces
+	Repite una o más veces
?	Repetir cero o una vez
{norte}	Repetir n veces
{norte,}	Repetir n veces o más
{Nuevo Méjico}	Repita de n a m veces

1.5.3 Otro

1. [] La cadena está entre corchetes, lo que significa que coincide con cualquier carácter, que es equivalente a o.
2. [^] coincide con el contenido fuera de los corchetes, lo que equivale al significado de non.
3. \ carácter de escape.
4. | O elija uno de los dos. Nota | Divida los lados izquierdo y derecho en dos partes, independientemente de cuán largos y desordenados estén los lados izquierdo y derecho.
5. () Elija una de las dos cantidades directas y agrúpelas. por ejemplo: gr (a | e) y coincide con gris y gris.
6. [\ u4e00- \ u9fa5] coincide con los caracteres chinos.

2 Expresiones regulares de uso común

Verificar el número de teléfono móvil:

^\d{11}$

Verifique el código postal:

^\d{6}$

Fecha de verificación 2012-5-01:

^\d{4}-\d{1,2}-\d{1,2}$

Verifique el correo electrónico [email protected]:

^\w+@\w+\.\w+$

Verifique la dirección IP 192.168.1.10

^\d{1,3}\(.\d{1,3}){3}$

3 Utilice expresiones regulares en JavaScript

3.1 Crear un objeto de expresión regular

En JavaScript, hay dos formas de crear objetos de expresión regular.

3.1.1 Método 1

var reg = new Regex('\d', 'i');
var reg = new Regex('\d', 'gi');

3.1.2 Método 2

var reg = /\d/i;
var reg = /\d/gi;

3.2 Parámetros

Firmar	Descripción
yo	Ignorar caso
gramo	Partido global
dar	Coincidencia global + ignorar caso

3.3 Coincidencia de expresiones regulares

Fecha del partido:

//  匹配日期var dateStr = '2020-10-24';
var reg = /^\d{4}-\d{1,2}-\d{1,2}$/console.log(reg.test(dateStr)); // true

3.4 Ejemplos

3.4.1 Verificar la seguridad de la contraseña

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="UTF-8">
                <title>密码强弱：公众号AlbertYang</title>
        </head>
        <style type="text/css">
                #dv {
                        width: 300px;
                        height: 200px;
                        position: absolute;
                        left: 300px;
                        top: 100px;
                }

                .strengthLv0 {
                        height: 6px;
                        width: 40px;
                        border: 1px solid #ccc;
                        padding: 2px;
                }

                .strengthLv1 {
                        background: red;
                        height: 6px;
                        width: 40px;
                        border: 1px solid #ccc;
                        padding: 2px;
                }

                .strengthLv2 {
                        background: orange;
                        height: 6px;
                        width: 80px;
                        border: 1px solid #ccc;
                        padding: 2px;
                }

                .strengthLv3 {
                        background: green;
                        height: 6px;
                        width: 120px;
                        border: 1px solid #ccc;
                        padding: 2px;
                }
        </style>
        <body>
                <div id="dv">
                        <label for="pwd">密码</label>
                        <input type="text" id="pwd" maxlength="16">
                        <div>
                                <em>密码强度：</em>
                                <span id="strength"></span>
                                <div id="strengthLevel" class="strengthLv0"></div>
                        </div>
                </div>
                <script>
                        // 获取文本框注册键盘抬起事件
                        document.getElementById("pwd").onkeyup = function() {
                                // 每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色
                                // 如果密码的长度是小于6的,不判断
                                let level = getLvl(this.value),
                                        levelStr = "弱";
                                if (level === 2) {
                                        levelStr = "中等";
                                } else if (level === 3) {
                                        levelStr = "强";
                                }

                                if (this.value.length >= 6) {
                                        document.getElementById("strengthLevel").className = "strengthLv" + level;
                                        document.getElementById("strength").innerHTML = levelStr;
                                } else {
                                        document.getElementById("strengthLevel").className = "strengthLv0";
                                        document.getElementById("strength").innerHTML = "";
                                }

                        };

                        // 根据密码返回对应的级别
                        function getLvl(pwd) {
                                let lvl = 0; // 默认是0级
                                // 判断密码中是否有数字
                                if (/[0-9]/.test(pwd)) {
                                        lvl++;
                                }
                                // 判断密码中有没有字母
                                if (/[a-zA-Z]/.test(pwd)) {
                                        lvl++;
                                }
                                // 判断密码中是否有特殊符号
                                if (/[^0-9a-zA-Z_]/.test(pwd)) {
                                        lvl++;
                                }
                                return lvl; // 最小值是1,最大值是3
                        }
                </script>
        </body>
</html>

3.4.2 Verificar correo electrónico

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="UTF-8">
                <title>验证邮箱：微信公众号：AlbertYang</title>
        </head>
        <body>
                请您输入邮箱地址:<input type="text" value="" id="email" /> *<br />
                <script>
                        //如果输入的是邮箱,那么背景颜色为绿色,否则为红色
                        //获取文本框,注册失去焦点的事件
                        document.getElementById("email").onblur = function() {
                                //判断这个文本框中输入的是不是邮箱
                                let reg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_-]+([.][a-zA-Z]+){1,2}$/;
                                if (reg.test(this.value)) {
                                        this.style.backgroundColor = "green";
                                } else {
                                        this.style.backgroundColor = "red";
                                }
                        };
                </script>

        </body>
</html>

3.4.3 Verificar el nombre chino

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="UTF-8">
                <title>验证中文名字：微信公众号AlbertYang</title>

        </head>
        <body>
                请输入您的名字:<input type="text" value="" id="userName" />*<br />
                <script>
                        // 是中文名字,则绿色,否则红色
                        document.getElementById("userName").onblur = function() {
                                var reg = /^[\u4e00-\u9fa5]{2,6}$/;
                                if (reg.test(this.value)) {
                                        this.style.backgroundColor = "green";
                                } else {
                                        this.style.backgroundColor = "pink";
                                }
                        };
                </script>

        </body>
</html>

3.5 Extracción de expresiones regulares

// 提取年龄var str = "张三18，李四36，王五60";
var array = str.match(/\d+/g);
console.log(array);

// 提取email地址var str = "[email protected],[email protected] [email protected],[email protected]";
var array = str.match(/\w+@\w+\.\w+(\.\w+)?/g);
console.log(array);

// 分组提取  
// 提取日期中的年  2020-10-24var dateStr = '2020-10-24';
// 正则表达式中的()作为分组来使用，获取分组匹配到的结果使用Regex.$1 $2 $3...
var reg = /(\d{4})-\d{1,2}-\d{1,2}/;
if (reg.test(dateStr)) {
  console.log(RegExp.$1);
}

// 提取邮件中的每一部分var reg = /(\w+)@(\w+)\.(\w+)(\.\w+)?/;
var str = "[email protected]";
if (reg.test(str)) {
  console.log(RegExp.$1);
  console.log(RegExp.$2);
  console.log(RegExp.$3);
}

3.6 Reemplazo de expresiones regulares

// 1.替换所有空白字符var str = "   reeed  asafdre56df   3rfereww  rtere ";
str = str.replace(/\s/g, "***");
console.log(str);

// 2.替换所有,或，var str = "abc,efg,123，abc,123，a";
str = str.replace(/,|，/g, ":");
console.log(str);

4 caso

4.1 Caso de validación de formulario

Dirección de demostración: https://www.albertyy.com/2020/10/validate.html

<!DOCTYPE html><html>
        <head>
                <meta charset="utf-8">
                <title>表单验证：微信公众号AlbertYang</title>
                <style type="text/css">
                        body {
                                background: #ccc;
                        }

                        label {
                                width: 40px;
                                display: inline-block;
                        }

                        span {
                                color: red;
                        }

                        .container {
                                margin: 100px auto;
                                width: 400px;
                                padding: 50px;
                                line-height: 40px;
                                border: 1px solid #999;
                                background: #efefef;
                        }

                        span {
                                margin-left: 30px;
                                font-size: 12px;
                        }

                        .wrong {
                                color: red
                        }

                        .right {
                                color: green;
                        }

                        .defau {
                                width: 200px;
                                height: 20px;
                        }

                        .de1 {
                                background-position: 0 -20px;
                        }
                </style>

        </head>

        <body>
                <div class="container" id="dv">
                        <label for="qq">Q Q</label><input type="text" id="qq"><span></span><br />
                        <label>手机</label><input type="text" id="phone"><span></span><br />
                        <label>邮箱</label><input type="text" id="e-mail"><span></span><br />
                        <label>座机</label><input type="text" id="telephone"><span></span><br />
                        <label>姓名</label><input type="text" id="fullName"><span></span><br />
                </div>
                <script>
                        // qq
                        checkInput(document.getElementById("qq"), /^\d{5,11}$/);
                        // 手机
                        checkInput(document.getElementById("phone"), /^\d{11}$/);
                        // 邮箱
                        checkInput(document.getElementById("e-mail"), /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
                        // 座机号码
                        checkInput(document.getElementById("telephone"), /^\d{3,4}[-]\d{7,8}$/);
                        // 中文名字
                        checkInput(document.getElementById("fullName"), /^[\u4e00-\u9fa5]{2,6}$/);

                        // 根据文本框和这个文本框相应的正则表达式，验证当前文本框中的值，与给出的正则表达式否匹配
                        function checkInput(input, reg) {
                                // 文本框失去焦点的事件
                                input.onblur = function() {
                                        if (reg.test(this.value)) {
                                                this.nextElementSibling.innerText = "正确";
                                                this.nextElementSibling.style.color = "green";
                                        } else {
                                                this.nextElementSibling.innerText = "错误,请您重新输入";
                                                this.nextElementSibling.style.color = "red";
                                        }
                                };
                        }
                </script>
        </body></html>

4.2 Filtrado de casos de palabras sensibles

Dirección de demostración: https://www.albertyy.com/2020/10/filter.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤敏感词汇：公众号AlbertYang</title>
	</head>
	<body>
		<textarea name="" id="message"></textarea> <button>提交</button>
		<div></div>
		<script>
			var text = document.querySelector('textarea');
			var btn = document.querySelector('button');
			var div = document.querySelector('div');
			btn.onclick = function() {
				div.innerHTML = text.value.replace(/激情|gay|AV/g, '**');
			}
		</script>
	</body>
</html>

5 Resumen

Este artículo comienza con los conceptos básicos de las expresiones regulares, explica las características y la composición de las expresiones regulares, explica en detalle el uso de las expresiones regulares en JavaScript y ofrece algunos ejemplos que se utilizan a menudo en el desarrollo real. Para las personas nuevas en el contacto, las expresiones regulares son más difíciles de entender. Por ejemplo: ^ \ w + ([- +.] \ W +) @ \ w + ([-.] \ W +) . \ W + ([-.] \ W +) * $. En el desarrollo real, generalmente buscamos buenas expresiones regulares en Internet y podemos modificar las expresiones regulares de acuerdo con la situación real. Por ejemplo, nombre de usuario: / ^ [a-z0-9 _-] {3,16} $ /.

Este es el final del estudio de hoy. Debido a mi capacidad y conocimientos limitados, si hay algún problema con la escritura, por favor, critícame y corrígeme. Si quieres seguir aprendiendo y mejorando, por favor prestame atención, cada día aprender y mejorar un poco es el comienzo de la iniciativa. Si cree que este artículo es útil para usted, bienvenido a reenviar, comentar y dar me gusta. ! !

Tutorial avanzado de JavaScript (7) -Expresiones regulares

Introducción

1 expresión regular

1.1 ¿Qué es una expresión regular?

1.2 El papel de las expresiones regulares

1.3 Características de las expresiones regulares

1.4 La composición de expresiones regulares

1.5 Metastring

1.5.1 Metastrings de uso común

1.5.2 Calificador

1.5.3 Otro

2 Expresiones regulares de uso común

3 Utilice expresiones regulares en JavaScript

3.1 Crear un objeto de expresión regular

3.1.1 Método 1

3.1.2 Método 2

3.2 Parámetros

3.3 Coincidencia de expresiones regulares

3.4 Ejemplos

3.4.1 Verificar la seguridad de la contraseña

3.4.2 Verificar correo electrónico

3.4.3 Verificar el nombre chino

3.5 Extracción de expresiones regulares

3.6 Reemplazo de expresiones regulares

4 caso

4.1 Caso de validación de formulario

4.2 Filtrado de casos de palabras sensibles

5 Resumen

Supongo que te gusta