Una expresión regular (Expresión regular) es un patrón para hacer coincidir combinaciones de caracteres en una cadena. En JavaScript, las expresiones regulares también son objetos.
Las expresiones regulares generalmente se usan para recuperar y reemplazar texto que coincide con un determinado patrón (regla), como la validación de formularios.
Ejemplo de aplicación: solo se pueden ingresar letras, números o guiones bajos en inglés en el formulario de nombre de usuario, y se pueden ingresar caracteres chinos en el cuadro de entrada de apodo (coincidencia). 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 la parte específica que queremos de la cadena (extracción), etc.

características

| Crear una expresión regular

Método 1: Crear llamando al constructor del objeto RegExp

Las expresiones regulares no necesitan comillas
debe estar entre paréntesis //

var 变量名 = new RegExp(/表达式/);

Método 2: Crear por literal

var 变量名 = /表达式/;

ejemplo de código

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //创建正则表达式 第一种方法
        var regexp = new RegExp(/123/);
        console.log(regexp); //   /123/

        //创建正则表达式 第二种方法
        var regexp2 = /456/;
        console.log(regexp2);//   /456/

        
    </script>
</head>
<body>
    
</body>
</html>

| Comprueba si una cadena coincide con una expresión regular

test() es un método de un objeto normal, que se utiliza para detectar si la cadena se ajusta a la regla, el objeto devolverá verdadero o falso, y su parámetro es la cadena de prueba.

regexObj.test(str)

ejemplo de código

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var regexp = /123/;
        console.log(regexp.test(123)); //true
        console.log(regexp.test(234)); //false
    </script>
</head>
<body>
    
</body>
</html>

| símbolo regular

¿Qué son los símbolos regulares?

Una expresión regular puede constar de caracteres simples, como /abc/, o una combinación de caracteres simples y especiales, como /ab*c/. Entre ellos, los caracteres especiales también se denominan metacaracteres, que son símbolos especiales con significados especiales en expresiones regulares, como ^, $, +, etc.
Prueba de expresión regular en línea Sitio web: Prueba en línea de expresión regular | Cainiao Tools
Para obtener más símbolos regulares, consulte Cainiao: Expresiones regulares - Prioridad del operador | Tutorial de Cainiao

1.1 Carácter de límite ^ $

El carácter de límite (carácter de posición) en la expresión regular se utiliza para indicar la posición del carácter , hay principalmente dos caracteres

Si ^ y $ están juntos, debe ser una coincidencia exacta

ejemplo de código

código de ejemplo 2

        //边界符 ^ $
        var regexp1 = /^a/;
        console.log(regexp1.test('ab'));//true
        console.log(regexp1.test('ba'));//false

1.2 Guión -

Si se agrega una línea horizontal corta afuera [ ] adentro //, significa que se debe escribir una línea horizontal en este lugar. falso de lo contrario

ejemplo de código

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var r1 = /^A-B$/;
        console.log(r1.test('A-B'));//true
        console.log(r1.test('A'));//false
    </script>
</head>
<body>
    
</body>
</html>

2.1 Clase de carácter - corchetes []

Una clase de carácter indica que hay una serie de caracteres para elegir, siempre que uno de ellos coincida. Todos los caracteres opcionales están encerrados entre corchetes.
Cabe señalar que si el carácter a seleccionar es un número, se puede escribir como /^[1|2|3]$/ o /^[123]$/

ejemplo de código

código de ejemplo 2

        //方括号符 []
        var regexp2 = /[a-b]/;
        console.log(regexp2.test('bc'));//true 包含a
        console.log(regexp2.test('cd'));//false 不包含a、b的任何一个

2.2 Clase de carácter - carácter de rango entre corchetes - (propenso a errores)

Agregue - dentro de los corchetes para indicar el rango, como /^[az]$/ indica cualquiera de las 26 letras en inglés de la a a la z.
Si - se agrega fuera de [ ], significa que debe haber un - guión en esa posición en la cadena coincidente

ejemplo de código

2.3 Clase de carácter: carácter de negación ^ entre corchetes (propenso a errores)

Agregar ^ dentro de los corchetes significa negación, siempre que se incluyan los caracteres entre corchetes, se devolverá falso.
¡Presta atención a la distinción de los caracteres límite! ! ¡El carácter de negación está escrito dentro de [ ]! Y el delimitador está escrito en el extremo izquierdo de //

gramática

/[^abc]/.test('andy') // 方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。

ejemplo de código

        //方括号符-取反符  [^]
        var regexp3 = /[^a-b]/
        console.log(regexp3.test('a'));//false
        var regexp4 = /^[^a-b]/ //必须包含（不含a-b的字符，即：只要不包含a、b即为true）
        console.log(regexp4.test('a'));//false
        console.log(regexp4.test('c'));//true

2.4 Clase de caracteres: la combinación de caracteres entre corchetes

Las combinaciones de caracteres se pueden usar dentro de los corchetes, lo que equivale a múltiples rangos

ejemplo de código

/[a-z1-9]/.test('andy')  //示包含 a 到 z 的26个英文字母或 1 到 9 的数字都

/a-zA-Z1-9/  //代表只要是a-z A-Z 1-9中的任何一个字符即可

3.1 Cuantificadores

ejemplo de código

        //量词符
        var regexp5 = /^a*$/ //含义：符号*前面的a可以重复0次/多次 才true
        console.log(regexp5.test(''));//true
        console.log(regexp5.test('aaaa'));//true

        var regexp6 = /^a+$/ //+前面的a必须出现大于等于1次才true
        console.log(regexp6.test(''));//false 
        console.log(regexp6.test('a'));//true

        var regexp7 = /^a?$/ //?前面的a 要么出现1次，要么不出现。若大于一次，则false
        console.log(regexp7.test(''));//true
        console.log(regexp7.test('a'));//true
        console.log(regexp7.test('aa'));//false

        var regexp8 = /^a{3}$/ //{3}前面的a需要重复三次才true
        console.log(regexp8.test('aa'));//false
        console.log(regexp8.test('aaa'));//true
        console.log(regexp8.test('aaaa'));//false

        var regexp9 = /^a{3,}$/ //{3,}前面的a需要重复三次或者更多次才true
        console.log(regexp9.test('aa'));//false
        console.log(regexp9.test('aaa'));//true
        console.log(regexp9.test('aaaa'));//true

        var regexp10 = /^a{3,4}$/ //{3,}前面的a需要重复三次或者4次才true
        console.log(regexp10.test('aa'));//false
        console.log(regexp10.test('aaa'));//true
        console.log(regexp10.test('aaaa'));//true
        console.log(regexp10.test('aaaaa'));//false

3.2 El papel de los cuantificadores: para especificar el rango de tiempos de un cierto patrón

Como el nombre de usuario: cada carácter solo puede ingresar AZ az 0-9 _ - y el número de dígitos es 6-18.
Los requisitos anteriores se pueden lograr a través de [clase de carácter] + [carácter cuantificador] en símbolos regulares. El primero especifica la especificación de entrada para cada carácter (solo se puede ingresar uno) , y el último especifica el rango de caracteres

ejemplo de código

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var regexp = /^[A-Za-z0-9_-]{6,18}$/ //每个字符规定为A-Z a-z 0-9 下划线 短横线。  字符的长度规定为[6，18]

        var userName1 = 'AAAzzz998';
        console.log(regexp.test(userName1));//true：每个字符都符合规定，且字符串长度也符合规定

        var userName2 = 'abcde';
        console.log(regexp.test(userName2));//false：虽然每个字符都符合规定，但是字符串长度不符合规定

        var userName3 = '*AAAAAAA'; 
        console.log(regexp.test(userName3));//false：第一个字符 * 不符合规定
        
    </script>
</head>
<body>
    
</body>
</html>

4.1 Clases predefinidas

Las clases predefinidas se refieren a la abreviatura de algunos patrones comunes.

ejemplo de código

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var regexp = /^\W$/ //除所有 字母、数字、下划线以外的字母
        console.log(regexp.test('a'));//false
        console.log(regexp.test('-'));//true
    </script>
</head>
<body>
    
</body>
</html>

Caso: verificación de número de teléfono fijo

5.1 Resumen de paréntesis en expresiones regulares // [] {} () y |

// Corchetes para expresiones regulares

[ ] coincide con los caracteres dentro de las reglas entre corchetes

{ } Símbolo cuantificador, que indica el número de repeticiones Nota : /^abc{3,5}$/ significa que c debe aparecer 3-5 veces en lugar de abc

( ) Los paréntesis indican la prioridad, si quieres que abc aparezca 3 veces arriba, debes escribirlo como /^(abc){3,5}$/

| significa "o"

Discriminación:

/^abc{3,5}$/ ab + 3-5 c

/^【abc】{3,5}$/ 3-5 caracteres, regla de caracteres: cualquiera de a, b, c

/^(abc){3,5}$/ 3-5 abc

6.1 Reemplazo regular replace()

El método replace() puede implementar la operación de cadena de reemplazo y el parámetro utilizado para el reemplazo puede ser una cadena o una expresión regular.

Método 1 (solo puede coincidir con la primera coincidencia)

Gramática ( el primer parámetro: la cadena reemplazada o la expresión regular ; el segundo parámetro: la cadena reemplazada; el valor devuelto es una nueva cadena después del reemplazo)

stringObject.replace(regexp/substr,replacement)

Si hay varias palabras confidenciales, puede usar | para separarlas en la expresión regular

str.replace(/敏感词A|敏感词B|……|敏感词n/,替换为)

ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var oldstr = '我cnm！cnm！';

        //单个匹配
        console.log(oldstr.replace(/cnm/,'***')); //我***！cnm!
    </script>
</head>
<body>
    
</body>
</html>

Método 2 (se puede combinar globalmente)

Gramática ( es decir, agregar un identificador g o i o gi después de la expresión regular)

/表达式/[switch]

¿Qué tipo de patrón coincide con el interruptor (también conocido como modificador)?
Hay tres valores: g: coincidencia global i: ignorar caso gi: coincidencia global + ignorar caso

ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var oldstr = '我cnm！cnm！';
        //全局匹配
        console.log(oldstr.replace(/cnm/gi,'***')); //我***！***！
        
    </script>
</head>
<body>
    
</body>
</html>

Caso: Verifique que el nombre de usuario ingresado por el usuario cumpla con la especificación

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 表单父盒子 */
        .input1 {
            width: 800px;
            height: 40px;
            margin: 200px auto;      
        }

        /* 输入框 */
        .input1 input {
            width: 300px;
            height: 30px;
            margin-left: 10px;
            background-color: rgb(209, 227, 248);
        }

        /* 获得焦点的时候 取消输入框的边框 */
        .input1 input:focus {
            outline: none;
        }

        /* 提示输入 */
        .input1 .tip {
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            font-weight: 500;
            color: rgb(115, 168, 228);
        }

        /* 错误信息 */
        .input1 .error {
            font-family: 'Microsoft YaHei';
            font-weight: 300;
            font-size: 13px;
            margin-left: 10px;
            color: red;
            visibility: hidden;
        }

        
    </style>

    <script>
        window.addEventListener('load',function(){
            var inputObj = document.querySelector('.input1 input');
            var errortipObj = document.querySelector('.input1 .error');

            inputObj.addEventListener('blur',function(){
                var content = inputObj.value;
                console.log(content);
                //正则表达式
                var regexp = /^[a-zA-Z0-9_-]{6,18}$/;
                if(!regexp.test(content)){
                    //若不符合规则，则span变红，让 .input1 .error的visibility为visible（注意：这个是style里的样式属性，需要obj.style.xxx）
                    errortipObj.style.visibility = 'visible';
                }else{
                    errortipObj.style.visibility = 'hidden';
                }
            })
        })
    </script>
</head>
<body>
    <div class="input1">
        <span class="tip">设置用户名</span> <input type="text" placeholder="英文字母、数字、下划线，6-18位">  
        <span class="error"> X Error （请检查英文字母、数字、下划线、6-18位）</span>
    </div>
</body>
</html>

[Parte VI | JavaScript Avanzado] 3: Expresiones Regulares

[Capítulo 3] Expresiones regulares (énfasis)

| Resumen

| Crear una expresión regular

| Comprueba si una cadena coincide con una expresión regular

| símbolo regular

¿Qué son los símbolos regulares?

1.1 Carácter de límite ^ $

1.2 Guión -

2.1 Clase de carácter - corchetes []

2.2 Clase de carácter - carácter de rango entre corchetes - (propenso a errores)

2.3 Clase de carácter: carácter de negación ^ entre corchetes (propenso a errores)

2.4 Clase de caracteres: la combinación de caracteres entre corchetes

3.1 Cuantificadores

3.2 El papel de los cuantificadores: para especificar el rango de tiempos de un cierto patrón

4.1 Clases predefinidas

5.1 Resumen de paréntesis en expresiones regulares // [] {} () y |

6.1 Reemplazo regular replace()

Caso: Verifique que el nombre de usuario ingresado por el usuario cumpla con la especificación

Supongo que te gusta