Uma expressão regular (Expressão regular) é um padrão para combinar combinações de caracteres em uma string. Em JavaScript, expressões regulares também são objetos.
As expressões regulares geralmente são usadas para recuperar e substituir o texto que corresponde a um determinado padrão (regra), como a validação de formulários
Exemplo de aplicação: Somente letras, números ou sublinhados em inglês podem ser inseridos no formulário de nome de usuário e caracteres chineses podem ser inseridos na caixa de entrada de apelido (correspondente). Além disso, as expressões regulares costumam ser usadas para filtrar algumas palavras sensíveis no conteúdo da página (substituição) ou para obter a parte específica que queremos da string (extração), etc.

características

| Criar uma expressão regular

Método 1: Criar chamando o construtor do objeto RegExp

Expressões regulares não precisam de aspas
deve ser colocado entre // parênteses

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

Método 2: criar por literal

var 变量名 = /表达式/;

exemplo 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>

| Testa se uma string corresponde a uma expressão regular

test() é um método de um objeto regular, usado para detectar se a string está de acordo com a regra, o objeto retornará verdadeiro ou falso, e seu parâmetro é a string de teste.

regexObj.test(str)

exemplo 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 normal

O que são símbolos regulares?

Uma expressão regular pode consistir em caracteres simples, como /abc/, ou uma combinação de caracteres simples e especiais, como /ab*c/. Dentre eles, os caracteres especiais também são chamados de metacaracteres, que são símbolos especiais com significados especiais em expressões regulares, como ^, $, +, etc.
Teste Online de Expressões Regulares Site: Teste Online de Expressões Regulares | Ferramentas Cainiao
Para mais símbolos regulares, consulte Cainiao: Regular Expressions - Operator Priority | Cainiao Tutorial

1.1. Caractere de limite ^ $

O caractere de limite (caractere de posição) na expressão regular é usado para solicitar a posição do caractere , existem principalmente dois caracteres

Se ^ e $ estiverem juntos, deve ser uma correspondência exata

exemplo de código

exemplo de código 2

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

1.2. Hífen -

Se uma linha horizontal curta for adicionada fora [ ] dentro de //, significa que uma linha horizontal deve ser escrita neste local. falso caso contrário

exemplo 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. Classe de caractere - colchetes []

Uma classe de caractere indica que há uma série de caracteres para escolher, desde que um deles corresponda. Todos os caracteres opcionais estão entre colchetes.
Deve-se observar que se o caractere a ser selecionado for um número, ele pode ser escrito como /^[1|2|3]$/ ou /^[123]$/

exemplo de código

exemplo de código 2

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

2.2. Classe de caractere - caractere de intervalo entre colchetes - (sujeito a erros)

Adicione - dentro dos colchetes para indicar o intervalo, como /^[az]$/ indica qualquer uma das 26 letras inglesas de a a z.
Se - for adicionado fora de [ ], significa: deve haver um traço - nessa posição na string correspondente

exemplo de código

2.3. Classe de caractere - caractere de negação ^ dentro de colchetes (sujeito a erros)

Adicionar ^ dentro dos colchetes significa negação, desde que os caracteres nos colchetes estejam incluídos, falso será retornado.
Preste atenção para distinguir dos caracteres de limite! ! O caractere de negação é escrito dentro de [ ]! E o delimitador é escrito no lado esquerdo de //

gramática

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

exemplo 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. Classe de caracteres - a combinação de caracteres entre colchetes

Combinações de caracteres podem ser usadas dentro dos colchetes, o que equivale a vários intervalos

exemplo 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. Quantificadores

exemplo 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. O papel dos quantificadores: para especificar o intervalo de tempos de um determinado padrão

Tal como nome de usuário: cada caractere só pode entrar AZ az 0-9 _ - e o número de dígitos é 6-18.
Os requisitos acima podem ser alcançados por meio de [classe de caractere] + [caractere quantificador] em símbolos regulares. O primeiro especifica a especificação de entrada para cada caractere (apenas um pode ser inserido) e o último especifica o intervalo de caracteres

exemplo 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. Classes predefinidas

Classes predefinidas referem-se a atalhos para alguns padrões comuns.

exemplo 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: verificação de número de telefone fixo

5.1 Resumo dos colchetes em expressões regulares // [] {} () e |

// Colchetes para expressões regulares

[ ] corresponde aos caracteres dentro das regras entre colchetes

{ } Símbolo do quantificador, indicando o número de repetições Nota : /^abc{3,5}$/ significa que c deve aparecer 3-5 vezes em vez de abc

( ) Os parênteses indicam a prioridade. Se quiser que abc apareça 3 vezes acima, escreva como /^(abc){3,5}$/

| significa "ou"

Discriminação:

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

/^【abc】{3,5}$/ 3-5 caracteres, regra de caracteres: qualquer um de a, b, c

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

6.1. Substituição regular replace()

O método replace() pode implementar a operação de string de substituição e o parâmetro usado para substituição pode ser uma string ou uma expressão regular.

Método 1 (só pode corresponder à primeira correspondência)

Gramática ( o primeiro parâmetro: a string ou expressão regular substituída ; o segundo parâmetro: a string substituída; o valor de retorno é uma nova string após a substituição)

stringObject.replace(regexp/substr,replacement)

Se houver várias palavras sensíveis, você pode usar | para separá-las na expressão regular

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

exemplo

<!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 (pode ser combinado globalmente)

Gramática ( ou seja, adicione um identificador g ou i ou gi após a expressão regular)

/表达式/[switch]

Que tipo de padrão o switch (também conhecido como modificador) corresponde
Existem três valores: g: correspondência global i: ignora maiúsculas e minúsculas gi: correspondência global + ignora maiúsculas e minúsculas

exemplo

<!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 se o nome de usuário inserido pelo usuário está em conformidade com a especificação

<!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 Avançado] 3: Expressões Regulares

[Capítulo 3] Expressões regulares (ênfase)

| Visão geral

| Criar uma expressão regular

| Testa se uma string corresponde a uma expressão regular

| símbolo normal

O que são símbolos regulares?

1.1. Caractere de limite ^ $

1.2. Hífen -

2.1. Classe de caractere - colchetes []

2.2. Classe de caractere - caractere de intervalo entre colchetes - (sujeito a erros)

2.3. Classe de caractere - caractere de negação ^ dentro de colchetes (sujeito a erros)

2.4. Classe de caracteres - a combinação de caracteres entre colchetes

3.1. Quantificadores

3.2. O papel dos quantificadores: para especificar o intervalo de tempos de um determinado padrão

4.1. Classes predefinidas

5.1 Resumo dos colchetes em expressões regulares // [] {} () e |

6.1. Substituição regular replace()

Caso: Verifique se o nome de usuário inserido pelo usuário está em conformidade com a especificação

Acho que você gosta