Bem-vindo a este guia completo sobre expressões regulares em JavaScript! Neste artigo, exploraremos em detalhes o que são expressões regulares, como elas são usadas em JavaScript e como podem ajudar você a simplificar e otimizar seu código. Do básico aos exemplos práticos, abordaremos tudo o que você precisa saber para começar a aproveitar ao máximo as expressões regulares em seus projetos JavaScript. Então vamos começar!
Introdução às expressões regulares
Expressões regulares são padrões de pesquisa usados para encontrar e manipular texto em cadeias de caracteres. Eles consistem em uma combinação de caracteres literais e metacaracteres, que definem regras específicas para encontrar correspondências no texto. Essas regras podem incluir a busca por caracteres específicos, intervalos de caracteres, repetições, alternativas e muito mais.
Em JavaScript, expressões regulares são criadas usando a classe RegExp ou usando o literal /patrón/. O padrão é a própria expressão regular, que é colocada entre barras. Vejamos um exemplo simples:
const regex = /hola/;
Neste exemplo, criamos uma expressão regular que pesquisará a string “hello” dentro de um texto. Agora que temos uma compreensão básica do que são expressões regulares, vamos explorar alguns conceitos-chave e técnicas avançadas para trabalhar com elas em JavaScript.
Sintaxe básica de expressões regulares
Expressões regulares em JavaScript são compostas de vários elementos-chave que nos permitem definir padrões de pesquisa mais complexos. Esses elementos incluem caracteres literais, metacaracteres, classes de caracteres, quantificadores, âncoras e muito mais. Vejamos alguns exemplos desses elementos:
Caracteres literais
Caracteres literais são aqueles que são pesquisados conforme aparecem no texto. Por exemplo, a expressão regular /hola/ irá procurar a sequência de caracteres “hello” em uma string de texto. É importante observar que as expressões regulares diferenciam maiúsculas de minúsculas, portanto /hola/ não corresponderá a "Hello" ou "HELLO".
Metacaracteres
Metacaracteres são caracteres especiais que têm um significado especial em expressões regulares. Por exemplo, o metacaractere . É usado para representar qualquer caractere, exceto uma nova linha. Outro metacaractere comum é o ^, que é usado para indicar o início de uma sequência de texto. Por exemplo, a expressão regular /^hola/ corresponderá a qualquer sequência de texto que comece com "hello".
Classes de personagens
Classes de caracteres são usadas para procurar qualquer caractere dentro de um conjunto específico. Por exemplo, a expressão regular /[aeiou]/ corresponderá a qualquer vogal em uma sequência de texto. Também é possível usar intervalos de caracteres em classes de caracteres. Por exemplo, a expressão regular /[a-z]/ corresponderá a qualquer letra minúscula.
Quantificadores
Quantificadores são usados para especificar o número de ocorrências de um elemento em uma expressão regular. Por exemplo, o quantificador * indica que o elemento anterior pode aparecer zero ou mais vezes. O quantificador + indica que o elemento anterior deve aparecer uma ou mais vezes. Por exemplo, a expressão regular /a+/ corresponderá a um ou mais "a"s em uma sequência de texto.
Âncoras
Âncoras são usadas para indicar a posição de uma correspondência dentro de uma sequência de texto. Por exemplo, a âncora \b corresponde a um limite de palavra. Por exemplo, a expressão regular /bholab/ corresponderá apenas à palavra "olá" como palavra completa, sem corresponder a palavras mais longas que contenham “hello” como parte delas.
Esses são apenas alguns exemplos da sintaxe básica de expressões regulares em JavaScript. Ao longo deste artigo , exploraremos conceitos e técnicas mais avançados para trabalhar com expressões regulares em JavaScript.
Pesquisa básica de correspondência
Uma das operações mais comuns realizadas com expressões regulares é procurar correspondências em uma sequência de texto. Em JavaScript, podemos usar o método search() para encontrar a primeira correspondência de uma expressão regular em uma sequência de texto. Vejamos um exemplo:
const texto = "¡Hola, mundo!"; const regex = /mundo/; const indice = texto.search(regex); console.log(indice); // 7
Neste exemplo, usamos o método search() para encontrar a primeira correspondência da expressão regular /mundo/ na sequência de texto "Olá, mundo!" O método search() retorna o índice da primeira correspondência encontrada ou -1 se nenhuma correspondência for encontrada.
Além do método search(), JavaScript também fornece outros métodos úteis para trabalhar com expressões regulares, como match(), replace(), split() y test(). Cada um desses métodos tem sua própria finalidade e pode ser usado de acordo com suas necessidades específicas.
Usando modificadores e sinalizadores
Em JavaScript, expressões regulares podem conter modificadores e sinalizadores que permitem pesquisas mais flexíveis e personalizadas. Modificadores são adicionados ao final de uma expressão regular e modificam seu comportamento. Alguns dos modificadores mais comuns são:
eu (insensível)
o modificador i é usado para executar uma pesquisa que não diferencia maiúsculas de minúsculas. Por exemplo, a expressão regular /hola/i corresponderá tanto a “hello” quanto a “Hello” ou “HELLO”.
g (global)
o modificador g Ele é usado para realizar uma pesquisa global em toda a sequência de texto, em vez de parar na primeira correspondência encontrada. Por exemplo, a expressão regular /a+/g corresponderá a todas as ocorrências de um ou mais "a"s em uma sequência de texto.
m (multilinha)
o modificador m Ele é usado para realizar uma pesquisa em várias linhas dentro de uma sequência de texto. Por exemplo, a expressão regular /^hola/m corresponderá à palavra "olá" no início de cada linha em uma sequência de texto.
Além de modificadores, JavaScript também permite o uso de sinalizadores em expressões regulares. Os sinalizadores são adicionados após a segunda barra ao criar uma expressão regular usando a classe RegExp. Algumas das bandeiras mais comuns são:
eu (insensível)
Como o modificador i, a bandeira i realiza uma pesquisa que não diferencia maiúsculas de minúsculas. Por exemplo, a expressão regular new RegExp("hola", "i") corresponderá tanto a “hello” quanto a “Hello” ou “HELLO”.
g (global)
Como o modificador g, a bandeira g realiza uma pesquisa global em toda a sequência de texto. Por exemplo, a expressão regular new RegExp("a+", "g") corresponderá a todas as ocorrências de um ou mais "a"s em uma sequência de texto.
m (multilinha)
Como o modificador m, a bandeira m executa uma pesquisa em várias linhas dentro de uma sequência de texto. Por exemplo, a expressão regular new RegExp("^hola", "m") corresponderá à palavra "olá" no início de cada linha em uma sequência de texto.
O uso de modificadores e flags em expressões regulares JavaScript pode ser muito útil para adaptar buscas a diferentes casos e requisitos específicos. Experimente e descubra como você pode aproveitar ao máximo esses recursos em seu código.
Metacaracteres e caracteres especiais
Metacaracteres e caracteres especiais são elementos-chave em expressões regulares que nos permitem realizar pesquisas mais poderosas e flexíveis. Já mencionamos alguns metacaracteres, como . y ^, mas há muitos outros que você pode usar em suas expressões regulares. Vejamos alguns dos metacaracteres e caracteres especiais mais comuns:
. (ponto)
O metacaractere . É usado para representar qualquer caractere, exceto uma nova linha. Por exemplo, a expressão regular /h.t/ corresponderá a “hat”, “hot”, “hit” e qualquer outra palavra de três letras que comece com “h” e termine com “t”.
\ (barra invertida)
A barra invertida é usada para escapar caracteres especiais em uma expressão regular. Por exemplo, se você quiser procurar um ponto literal em uma sequência de texto, você deve escapá-lo usando a barra invertida. A expressão regular /www\.google\.com/ corresponderá à sequência de texto “www.google.com”.
\d (dígito)
O metacaractere \d é usado para procurar qualquer dígito de 0 a 9. Por exemplo, a expressão regular /\d+/ corresponderá a qualquer número de um ou mais dígitos em uma sequência de texto.
\w (caractere alfanumérico)
O metacaractere \w é usado para procurar qualquer caractere alfanumérico (letras maiúsculas e minúsculas, dígitos e sublinhados). Por exemplo, a expressão regular /\w+/ corresponderá a qualquer palavra de um ou mais caracteres alfanuméricos em uma sequência de texto.
Estes são apenas alguns exemplos de metacaracteres e caracteres especiais que você pode usar em suas expressões regulares. À medida que você se familiarizar com expressões regulares em JavaScript, descobrirá uma grande variedade de opções para refinar suas pesquisas e manipulações de texto.
Classes e intervalos de caracteres
Classes de caracteres são outro elemento-chave em expressões regulares que nos permitem procurar qualquer caractere dentro de um conjunto específico. Em JavaScript, podemos usar colchetes [] para definir uma classe de personagem. Vejamos alguns exemplos de classes e intervalos de caracteres:
[aeiou]
A classe de personagem [aeiou] corresponderá a qualquer vogal em uma sequência de texto. Por exemplo, a expressão regular /[aeiou]/ corresponderá a "a", "e", "i", "o" ou "u" em uma sequência de texto.
[az]
A gama de caracteres [a-z] corresponderá a qualquer letra minúscula do alfabeto inglês. Por exemplo, a expressão regular /[a-z]/ corresponderá a qualquer letra minúscula em uma sequência de texto.
[0-9]
A gama de caracteres [0-9] corresponderá a qualquer dígito de 0 a 9 em uma sequência de texto. Por exemplo, a expressão regular /[0-9]/ corresponderá a qualquer número de um único dígito.
[A-Za-z]
A classe de personagem [A-Za-z] corresponderá a qualquer letra maiúscula ou minúscula do alfabeto inglês. Por exemplo, a expressão regular /[A-Za-z]/ corresponderá a qualquer letra em uma sequência de texto.
Classes e intervalos de caracteres nos permitem definir conjuntos específicos de caracteres para pesquisar em uma expressão regular. Use-os para adaptar suas pesquisas às suas necessidades e restrições específicas.
Quantificadores e repetições
Quantificadores e repetições são elementos-chave em expressões regulares que nos permitem especificar o número de ocorrências de um elemento em uma sequência de texto. Vejamos alguns dos quantificadores mais comuns em JavaScript:
* (asterisco)
O quantificador * indica que o elemento anterior pode aparecer zero ou mais vezes. Por exemplo, a expressão regular /a*/ corresponderá a zero ou mais 'a's em uma sequência de texto.
+ (mais)
O quantificador + indica que o elemento anterior deve aparecer uma ou mais vezes. Por exemplo, a expressão regular /a+/ corresponderá a um ou mais "a"s em uma sequência de texto.
? (pergunta)
O quantificador ? indica que o elemento anterior pode aparecer zero ou uma vez. Por exemplo, a expressão regular /colou?r/ corresponderá a “cor” e “cor”.
{n} (exatamente n vezes)
O quantificador {n} indica que o elemento anterior deve aparecer exatamente n vezes. Por exemplo, a expressão regular /a{3}/ corresponderá exatamente a três "a"s em uma sequência de texto.
{n,} (pelo menos n vezes)
O quantificador {n,} indica que o elemento anterior deve aparecer pelo menos n vezes. Por exemplo, a expressão regular /a{2,}/ corresponderá a dois ou mais 'a's em uma sequência de texto.
{n, m}
O quantificador {n,m} indica que o elemento anterior deve aparecer no mínimo n vezes e no máximo m vezes. Por exemplo, a expressão regular /a{2,4}/ corresponderá a dois, três ou quatro "a"s em uma sequência de texto.
Estes são apenas alguns exemplos de quantificadores que você pode usar em suas expressões regulares. Quantificadores nos permitem especificar padrões de repetição em pesquisas e manipulações de texto, facilitando a extração de informações específicas de sequências de texto.
Âncoras e limites de palavras
Âncoras e limites de palavras são elementos que nos permitem indicar a posição de uma correspondência dentro de uma sequência de texto. Esses elementos são especialmente úteis quando queremos pesquisar palavras inteiras ou garantir que uma correspondência esteja no início ou no fim de uma linha. Vejamos alguns exemplos de âncoras e limites de palavras:
\b (limite de palavra)
O limite de palavras \b corresponde ao limite entre um caractere alfanumérico e um caractere não alfanumérico. Por exemplo, a expressão regular /\bjavascript\b/ corresponderá apenas à palavra “javascript” como uma palavra completa, não correspondendo a palavras mais longas que contenham “javascript” como parte delas.
^ (início da linha)
O caráter ^ É usado para indicar o início de uma linha em uma sequência de texto. Por exemplo, a expressão regular /^hola/ corresponderá à palavra "olá" no início de cada linha em uma sequência de texto.
$ (fim da linha)
O caráter $ É usado para indicar o fim de uma linha em uma sequência de texto. Por exemplo, a expressão regular /mundo$/ corresponderá à palavra "mundo" no final de cada linha em uma sequência de texto.
\A (início do texto)
O caráter \A É usado para indicar o início de todo o texto em uma sequência de texto, não apenas o início de uma linha. Por exemplo, a expressão regular /^\AHola/ corresponderá à palavra “Olá” no início de todo o texto.
\Z (fim do texto)
O caráter \Z é usado para indicar o fim de todo o texto em uma sequência de texto, não apenas o fim de uma linha. Por exemplo, a expressão regular /Mundo\Z/ corresponderá à palavra "Mundo" no final de todo o texto.
Âncoras e limites de palavras nos permitem procurar correspondências em locais específicos dentro de uma sequência de texto, o que pode ser útil em situações em que queremos garantir que uma correspondência esteja em uma posição específica.
Grupos e capturas
Grupos e capturas são elementos avançados em expressões regulares que nos permitem agrupar subexpressões e capturá-las para uso posterior. Vamos ver como funcionam os grupos e capturas:
( ) (parênteses)
Os parênteses são Eles costumam agrupar subexpressões em uma expressão regular. Por exemplo, a expressão regular /(d{2})-(d{2})-(d{4})/ se usado para procurar uma data no formato "dd-mm-aaaa. Os grupos ( ) Eles nos permitem capturar os valores do dia, mês e ano separadamente.
\1, \2, \3 (referências de grupo)
Referências de grupo são usadas para se referir a grupos capturados anteriormente em uma expressão regular. Por exemplo, a expressão regular /(\w+) \1/ corresponderá a qualquer palavra seguida pela mesma palavra repetida. Por exemplo, “olá, olá”, “mundo mundo”, etc.
?: (grupo não-capturador)
O símbolo ?: É usado para criar grupos não capturados. Esses grupos são usados quando queremos agrupar subexpressões, mas não queremos capturar o resultado. Por exemplo, a expressão regular /https?:\/\/(?:www\.)?google\.com/ corresponderá a “http://www.google.com” e “https://google.com”, mas capturará apenas a parte relevante do URL.
Os grupos e as capturas permitem estruturar e organizar as expressões regulares de forma mais eficiente e legível. Também possibilitam a captura de valores específicos para uso posterior em nossas aplicações.
Métodos úteis para trabalhar com expressões regulares
JavaScript fornece vários métodos úteis para trabalhar com expressões regulares. Esses métodos nos permitem realizar operações comuns, como pesquisar, substituir e dividir sequências de texto usando expressões regulares. Vejamos alguns desses métodos:
partida()
O método match() Ele é usado para encontrar todas as correspondências de uma expressão regular em uma sequência de texto e retornar uma matriz com os resultados. Por exemplo:
const texto = "¡Hola, mundo!"; const regex = /o/g; const coincidencias = texto.match(regex); console.log(coincidencias); // ["o", "o"]
Neste exemplo, usamos o método match() para encontrar todas as correspondências da expressão regular /o/g na sequência de texto "Olá, mundo!" O método match() retorna uma matriz com todas as correspondências encontradas.
substituir ()
O método replace() é usado para substituir correspondências de uma expressão regular em uma sequência de texto por um novo valor. Por exemplo:
const texto = "¡Hola, mundo!"; const regex = /mundo/; const nuevoTexto = texto.replace(regex, "amigo"); console.log(nuevoTexto); // "¡Hola, amigo!"
Neste exemplo, usamos o método replace() para substituir a correspondência de expressão regular /mundo/ na sequência de texto "Olá, mundo!" para a palavra "amigo". O método replace() retorna uma nova string de texto com as substituições feitas.
dividir()
O método split() é usado para dividir uma sequência de texto em uma matriz de substrings usando uma expressão regular como separador. Por exemplo:
const texto = "Hola,mundo,amigo"; const regex = /,/g; const subcadenas = texto.split(regex); console.log(subcadenas); // ["Hola", "mundo", "amigo"]
Neste exemplo, usamos o método split() para dividir a sequência de texto "Olá, mundo, amigo" em uma matriz de substrings usando a expressão regular /,/g como separador. O método split() retorna uma matriz com as substrings resultantes.
teste ()
O método test() Ele é usado para verificar se uma expressão regular tem alguma correspondência em uma sequência de texto. O método retorna true se houver uma correspondência e false de outra forma. Por exemplo:
const texto = "Hola, mundo!"; const regex = /mundo/; const resultado = regex.test(texto); console.log(resultado); // true
Neste exemplo, usamos o método test() para verificar se a expressão regular /mundo/ tem alguma correspondência na sequência de texto "Olá, mundo!". O método test() trazer de volta true porque há uma coincidência.
Esses são apenas alguns dos métodos mais comuns para trabalhar com expressões regulares em JavaScript. Cada um desses métodos tem sua própria finalidade e pode ser usado de acordo com suas necessidades específicas. Experimente-os e descubra como eles podem tornar seu trabalho com expressões regulares mais fácil e rápido.
Perguntas frequentes
O que são expressões regulares em JavaScript? Expressões regulares em JavaScript são padrões de busca usados para encontrar e manipular texto em cadeias de caracteres.
Como criar expressões regulares em JavaScript? Expressões regulares em JavaScript são criadas usando a classe RegExp ou usando o literal /patrón/.
Qual é a diferença entre modificadores e sinalizadores em expressões regulares? Modificadores são adicionados ao final de uma expressão regular e modificam seu comportamento. Os sinalizadores são adicionados após a segunda barra ao criar uma expressão regular usando a classe RegExp.
Qual é a diferença entre o método match() e o método test()? O método match() Ele é usado para encontrar todas as correspondências de uma expressão regular em uma sequência de texto e retorna uma matriz com os resultados. O método test() Ele é usado para verificar se uma expressão regular tem alguma correspondência em uma sequência de texto e retorna um valor booleano.
Como posso capturar valores específicos usando grupos em uma expressão regular? Os grupos ( ) em uma expressão regular permite capturar subexpressões específicas. Você pode então referenciar esses grupos usando as referências \1, \2, etc.
Quais métodos posso usar para trabalhar com expressões regulares em JavaScript? Alguns métodos úteis para trabalhar com expressões regulares em JavaScript são match(), replace(), split() y test(). Cada um desses métodos tem sua própria finalidade e pode ser usado de acordo com suas necessidades específicas.
Conclusão
Expressões regulares são uma ferramenta poderosa para trabalhar com texto em JavaScript. Compreender os fundamentos , a sintaxe e as técnicas avançadas de expressões regulares permitirá que você busque, substitua e manipule strings de texto de forma eficiente e precisa. Desde a correspondência básica até o uso de modificadores, grupos e outros métodos úteis, você aprendeu como aproveitar ao máximo as expressões regulares em seus projetos JavaScript.
Lembre-se de praticar e experimentar diferentes padrões e casos de uso para fortalecer sua compreensão e familiaridade com expressões regulares. Não hesite em usar expressões regulares para melhorar a eficiência e a qualidade do seu código!