Como começar rapidamente com VUE3.0: Entre no aprendizado
Recomendações relacionadas: Tutorial de JavaScript
Expressão regular ( expressão regular, conhecida como regexp )
Aplicação: No desenvolvimento de projetos, funções como ocultar dígitos específicos de números de telefones celulares, coleta de dados, filtragem de palavras confidenciais e verificação de formulários podem ser implementadas usando expressões regulares.
Campos aplicáveis: Em sistemas operacionais (Unix, Linux, etc.), linguagens de programação (C, C++, Java, PHP, Python, JavaScript, etc.).
Por exemplo: tome a pesquisa de texto como exemplo. Se você encontrar uma string que corresponda a um determinado recurso (como um número de telefone celular) em uma grande quantidade de texto, escreva esse recurso de acordo com a sintaxe de uma expressão regular para formar um. padrão reconhecido pelo programa de computador (Padrão), e então o programa de computador combinará o texto de acordo com esse padrão para encontrar a string que atende às regras.
A história das expressões regulares 
Forma de expressão de expressão regular
Durante o desenvolvimento, muitas vezes é necessário pesquisar e combinar strings especificadas com base em padrões de correspondência regulares.
Além de recuperar o valor especificado na string, o método match() no objeto String também pode corresponder a todo o conteúdo que atenda aos requisitos da string de destino de acordo com as regras regulares e salvá-lo em uma matriz após o a correspondência foi bem-sucedida, retorna falso se a correspondência falhar.
Em um aplicativo JavaScript, primeiro você precisa criar um objeto regular antes de usar expressões regulares. Além da criação literal explicada anteriormente, ela também pode ser criada através do construtor do objeto RegExp.
Para permitir que os leitores compreendam melhor a aquisição de objetos regulares, uma explicação comparativa será dada tomando como exemplo a correspondência dos caracteres especiais "^", "$", "*", "." e "" .
Observe que
embora os objetos regulares criados pelo método construtor e pelo método literal sejam completamente idênticos em função, eles têm certas diferenças na implementação da sintaxe. O padrão anterior precisa escapar da barra invertida () quando usado. Ao escrever o último padrão, ele deve ser colocado dentro do delimitador "/" e a tag flags deve ser colocada fora do delimitador final.
Benefícios: O uso eficaz de categorias de caracteres pode tornar as expressões regulares mais concisas e fáceis de ler.
Exemplo 1: Letras maiúsculas, letras minúsculas e números podem ser representados diretamente usando "w".
Caso 2: Se quiser combinar números entre 0 e 9, você pode usar "d".
Para facilitar a compreensão dos leitores sobre o uso de categorias de caracteres, utilizamos "." e "s" como exemplos para demonstração.
Representação de conjuntos de caracteres: "[]" pode implementar um conjunto de caracteres.
Intervalo de caracteres: Quando usado junto com o hífen "-", significa corresponder caracteres dentro do intervalo especificado.
Caracteres antônimos: quando o metacaractere "^" é usado junto com "[]", ele é chamado de caractere antônimo.
Fora de um determinado intervalo: "^" é usado junto com "[]" para corresponder caracteres que não estão dentro do intervalo de caracteres especificado.
Pegue a string 'get好TB6'.match(/pattern/g) como exemplo para demonstrar seu uso comum.
Observe
que o caractere "-" geralmente representa apenas um caractere comum e só é
usado como metacaractere ao representar um intervalo de caracteres. O intervalo representado pelo hífen "-" segue a sequência de codificação de caracteres. Por exemplo, "aZ", "za" e "a-9" são todos intervalos ilegais.
[Caso] Limitar conteúdo de entrada
Ideia de implementação de código :
Escreva HTML, defina uma caixa de texto para o ano (ano) e mês (mês) e um botão de consulta.
Obtenha o objeto elemento da operação e verifique o envio do formulário.
Verifique o ano, formato regular: /^d{4}/. Verifique o mês, regra regular: / ( ( 0 ? [ 1 − 9 ] ) ∣ ( 1 [ 012 ] ) ) /.
A caixa de texto ganha foco e a cor da caixa de prompt é removida. A caixa de texto perde o foco, remove os espaços em branco nas duas extremidades do conteúdo de entrada e é validada.
Implementação de código
<!DOCTYPEhtml>
<html>
<cabeça>
<meta charset="UTF-8">
<title>Limitar conteúdo de entrada</title>
<estilo>
input[type=text]{largura: 40px;cor da borda: #bbb;altura: 25px;tamanho da fonte: 14px;raio da borda: 2px;contorno: 0;borda: #ccc 1px sólido;preenchimento: 0 10px; -webkit-transition: box-shadow .5s;margin-bottom: 15px;}
input[type=text]:hover, input[type=text]:focus,input[type=submit]:hover{borda: 1px sólido #56b4ef: inserção 0 1px 3px rgba(0,0,0, 0,05),0 0 8px rgba(82.168.236,.6); -webkit-transition: box-shadow .5s;}
input::-webkit-input-placeholder {cor: #999; -webkit-transition: cor .5s;}
input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {cor: #c2c2c2; -webkit-transition: color .5s;}
input[type=submit]{altura: 30px; largura: 80px; fundo: #4393C9;
</estilo>
</head>
<corpo>
<form id="formulário">
Ano<input type="text" name="ano">
Mês<input type="text" name="mês">
<input type="submit" value="query">
</form>
<p id="resultado"></p>
<roteiro>
function anodeverificação(obj) {
if (!obj.value.match(/^d{4}$/)) {
obj.style.borderColor = 'vermelho';
result.innerHTML = 'Erro de entrada, o ano é representado por 4 dígitos';
retornar falso;
}
resultado.innerHTML = '';
retornar verdadeiro;
}
function verificarMês(obj) {
if (!obj.value.match(/^((0?[1-9])|(1[012]))$/)) {
obj.style.borderColor = 'vermelho';
result.innerHTML = 'Erro de entrada, mês está entre 1 e 12';
retornar falso;
}
resultado.innerHTML = '';
retornar verdadeiro;
}
var form = document.getElementById('form'); // <form> objeto elemento var result = document.getElementById('result'); // <p> objeto elemento var inputs = document.getElementsByTagName('input'); // <input> coleção de elementos form.onsubmit = function() {
return checkYear(inputs.year) && checkMonth(inputs.month);
};
entradas.ano.onfocus = function() {
this.style.borderColor = '';
};
entradas.mês.onfocus = function() {
this.style.borderColor = '';
};
if (!String.prototype.trim) {
String.prototype.trim = função() {
return this.replace(/^[suFEFFxA0]+|[suFEFFxA0]+$/g, '');
// uFEFF marca de ordem de bytes xA0 não envolve espaços em branco };
}
entradas.ano.onblur = function() {
este.valor = este.valor.trim();
verificarAno(isto);
};
entradas.mês.onblur = function() {
este.valor = este.valor.trim();
checkMês(este);
};
</script>
</body>
</html> O : detecta se a expressão regular corresponde à string especificada.
Quando a correspondência é bem-sucedida, o valor de retorno do método test() é verdadeiro, caso contrário, retorna falso.
Detectando modificadores de padrão de objetos regulares
Existem também algumas propriedades na classe RegExp que são usadas para detectar os modificadores de padrão usados pelo objeto regular atual e especificar o índice inicial da próxima correspondência.
Para que os leitores entendam melhor o uso desses atributos, a seguir utilizamos a correspondência de espaços como exemplo para demonstrar.
: pode retornar a posição onde a substring do padrão especificado aparece pela primeira vez na string. É mais poderoso que o método indexOf().
Método split() : usado para dividir uma string em uma matriz de string com base no delimitador especificado. A matriz de string dividida não inclui o delimitador.
Quando há mais de um delimitador, um objeto regular precisa ser definido para completar a operação de divisão da string.
Observe que
quando a string está vazia, o método split() retorna um array "[""]" contendo uma string vazia. Se a string e o delimitador forem strings vazias, um array vazio "[] será retornado. ".
Verificação
prática
da força da senhaCondições de verificação da força da senha:
① Comprimento <6 dígitos, sem força da senha.
②O comprimento é >6 caracteres e contém números, letras ou outros caracteres, e a força da senha é "baixa".
③O comprimento é >6 caracteres e contém dois tipos de números, letras ou outros caracteres. A força da senha é "média".
④ Se o comprimento for >6 caracteres e contiver três ou mais tipos de números, letras ou outros caracteres, a força da senha será "Alta".
faz uma pergunta: Corresponde a um caractere consecutivo, como 6 dígitos consecutivos "458925".
Solução 1: Objeto regular/dddddd/gi.
Problemas: O "d" repetido não é fácil de ler e complicado de escrever.
Solução 2: Use qualificadores (?, +, *, { }) para completar a correspondência de ocorrências consecutivas de um determinado caractere. Objeto regular/d{6}/gi.
Quando o caractere ponto (.) é usado com o qualificador, ele pode corresponder a qualquer caractere no intervalo de números especificado.
A expressão regular oferece suporte à correspondência gananciosa e à correspondência lenta ao combinar qualquer caractere dentro de um intervalo especificado.
Em expressões regulares, o conteúdo entre colchetes "()" é chamado de "subexpressão".
Os parênteses implementam a correspondência de catch e cater e, se os parênteses não forem usados, torna-se catch e er. 
Quando não agrupado, significa combinar 2 caracteres c após o agrupamento, significa combinar 2 strings "bc".
: O processo de armazenamento do conteúdo correspondido por uma subexpressão na área de cache do sistema.
Não captura: não armazene o conteúdo correspondente da subexpressão no cache do sistema, use (?:x) para conseguir isso.
O método replace() do objeto String pode usar diretamente $n (n é um número inteiro positivo maior que 0) para obter o conteúdo capturado e completar a operação de substituição do conteúdo capturado pela subexpressão.
Você pode usar "(?:x)" para obter correspondência sem captura
Ao escrever uma expressão regular, se você deseja obter o conteúdo capturado da subexpressão armazenada na área de cache da expressão regular, você pode usar "n" (n é uma referência inteira positiva, esta é uma referência). processo é "referência reversa".
Asserção de largura zero : refere-se a uma correspondência de subexpressão de largura zero, usada para descobrir se o conteúdo correspondido pela subexpressão contém um conjunto de caracteres específico antes ou depois.
Classificação: dividida em pré-busca direta e pré-busca reversa, mas apenas a pré-busca direta é suportada em JavaScript, ou seja, combinar dados antes de conterem ou não o conteúdo capturado, e os resultados correspondentes não conterem o conteúdo capturado.
Existem muitos operadores em expressões regulares. Na aplicação real, vários operadores serão combinados de acordo com a ordem de precedência. A precedência dos operadores comumente usados em expressões regulares, em ordem de maior para menor, é a seguinte.
[Caso] Pesquisa e substituição de conteúdo
Idéia de implementação de código :
Implementação de código
<!DOCTYPEhtml>
<html>
<cabeça>
<meta charset="UTF-8">
<title>Pesquisa e substituição de conteúdo</title>
<estilo>
p{float:esquerda;}
entrada{margem:0 20px;}
</estilo>
</head>
<corpo>
<p>Conteúdo antes da filtragem:<br>
<textarea id="pre" rows="10" cols="40"></textarea>
<input id="btn" type="button" value="filtro">
</p>
<p>Conteúdo filtrado:<br>
<textarea id="res" rows="10" cols="40"></textarea>
</p>
<roteiro>
document.getElementById('btn').onclick=função(){
// Definir as regras de conteúdo que precisam ser pesquisadas e substituídas. [u4e00-u9fa5] significa combinar quaisquer caracteres chineses var reg = /(bad)|[u4e00-u9fa5]/gi;
var str = document.getElementById('pré').value;
var newstr = str.replace(reg, '*');
document.getElementById('res').innerHTML = newstr;
};
</script>
</body>
</html> Recomendações relacionadas: Tutorial de aprendizado de JavaScript
. O texto acima é expressões regulares de JavaScript. Este artigo é suficiente para obter mais detalhes, preste atenção a outros artigos relacionados no site PHP chinês!
