30 trechos de código Regex úteis para desenvolvedores da Web

Expressões regulares são uma ferramenta poderosa que deve estar no cinto de ferramentas de todos os desenvolvedores. Eles podem corresponder a uma sequência de caracteres com base em parâmetros muito complexos, o que pode economizar muito tempo ao criar sites dinâmicos.

Os desenvolvedores da Web enfrentam tarefas diferentes dos desenvolvedores de software, mas muitos dos fundamentos do código permanecem. Expressões regulares (ou regex) tem um curva de aprendizado inicial íngreme, mas eles podem ser tremendamente poderoso quando usado corretamente.

A parte mais complicada é aprender a sintaxe e aprender como escrever seu próprio código de regex a partir do zero. Para economizar tempo, organizei 30 trechos de código de regex diferentes que você pode incorporar em projetos de desenvolvimento. E como o regex não se limita a um único idioma, você pode aplicar esses trechos a qualquer coisa, JavaScript para PHP ou Python.

1. Força da Senha

^ (? =. * [AZ]. * [AZ]) (? =. * [! @ # $ & *]) (? =. * [0-9]. * [0-9]) (? = * [az]. * [az]. * [az]). 8 $

Verificar a força de uma senha é geralmente subjetivo, portanto não há resposta correta absoluta. Mas sinto que este snippet de regex é um excelente ponto de partida se você não quiser escrever seu próprio verificador de força de senha do zero. (Fonte)

2. Cor Hexadecimal

\ # ([a-fA-F] | [0-9]) 3, 6

O campo do desenvolvimento web é onipresente com códigos de cores hexadecimais. Esse snippet de regex pode ser usado para extrair combinações de código hexadecimal de qualquer string para qualquer finalidade. (Fonte)

3. Validar Endereço de E-mail

/[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]2,4/igm

Uma das tarefas mais comuns para um desenvolvedor é verificar se uma string é formatada no estilo de um endereço de email. Existem muitas variantes diferentes para realizar essa tarefa, portanto, este link SitePoint oferece dois trechos de código distintos para verificar a sintaxe de e-mail em relação a uma string. (Fonte)

4. Endereço IPv4

/\b(?:(?:25.000-0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.)3 (?: 25 [0-5] | 2 [0-4] [0-9] | [01]? [0-9] [0-9]?) \ B /

Semelhante a um endereço de e-mail é o endereço IP típico usado para identificar um computador específico que acessa a Internet. Essa expressão regular verificará uma string para ver se segue a sintaxe do endereço IPv4. (Fonte)

5. Endereço IPv6

(([0-9a-fA-F] 1,4:) 7,7 [0-9a-fA-F] 1,4 | ([0-9a-fA-F] 1 , 4:) 1,7: | ([0-9a-fA-F] 1,4:) 1,6: [0-9a-fA-F] 1,4 | ([0-9a-fA-F] 1,4:) 1,5 (: [0-9a-fA-F] 1,4) 1,2 | ([0-9a -fA-F] 1,4:) 1,4 (: [0-9a-fA-F] 1,4) 1,3 | ([0-9a-fA-F] 1,4:) 1,3 (: [0-9a-fA-F] 1,4) 1,4 | ([0-9a-fA-F] 1,4 :) 1,2 (: [0-9a-fA-F] 1,4) 1,5 | [0-9a-fA-F] 1,4: ((: [0 -9a-fA-F] 1,4) 1,6) |: ((: [0-9a-fA-F] 1,4) 1,7 |:) | fe80: (: [0-9a-fA-F] 0,4) 0,4% [0-9a-zA-Z] 1, |: :( ffff (: 0 1,4) 0,1:) 0,1 ((25 [0-5] | (2 [0-4] | 1 0,1 [0-9]) 0,1 [0-9 ]) \.) 3,3 (25 [0-5] | (2 [0-4] | 1 0,1 [0-9]) 0,1 [0-9]) | ([0-9a-fA-F] 1,4:) 1,4: ((25 [0-5] | (2 [0-4] | 1 0,1 [0-9 ]) 0,1 [0-9]) \.) 3,3 (25 [0-5] | (2 [0-4] | 1 0,1 [0-9])  0,1 [0-9]))

Como alternativa, você pode querer verificar um endereço para a sintaxe mais recente do IPv6 com este snippet de regex mais avançado. A diferença é pequena, embora vital durante o desenvolvimento. (Fonte)

6. Separador de Milhares

/ \ d 1,3 (? = (\ d 3) + (?! \ d)) / g

Os sistemas tradicionais de numeração exigem uma vírgula, ponto ou outra marca a cada três dígitos em um número maior. Este código regex opera em qualquer número e aplica qualquer marca que você escolher para cada terceiro dígito, separando em milhares, milhões, etc. (Fonte)

7. Prefira o HTTP ao hiperlink

if (! s.match (/ ^ [a-zA-Z] +: \ / \ //)) s = 'http: //' + s; 

Se você está trabalhando em JavaScript, Ruby ou PHP, essa expressão regular pode ser muito útil. Ele verificará qualquer string de URL para ver se ela tem um prefixo HTTP / HTTPS e, se não, prefixá-la de acordo. (Fonte)

8. Puxe o domínio do URL

/https?:\/\/(?:[-\w]+\.)?([-\w]+)\.\w+(?:\.\w+)?\/?.*/i

Cada domínio de site contém o protocolo inicial (HTTP ou HTTPS) e, muitas vezes, um subdomínio mais o caminho de página adicional. Você pode usar esse trecho para cortar tudo isso e retornar apenas o nome do domínio sem extras extras. (Fonte

9. Ordenar palavras-chave por contagem de palavras

^ [^ \ s] * $ corresponde exatamente à palavra-chave de 1 palavra ^ [^ \ s] * \ s [^ \ s] * $ corresponde exatamente à palavra-chave de duas palavras ^ [^ \ s] * \ s [^ \ s] * corresponde a palavras-chave de pelo menos 2 palavras (2 e mais) ^ ([^ \ s] * \ s) 2 [^ \ s] * $ corresponde exatamente à palavra-chave com 3 palavras ^ ([^ \ s] * \ s ) 4 [^ \ s] * $ corresponde a 5 palavras ou mais palavras-chave (longtail)

Os usuários do Google Analytics e das Ferramentas do Google para webmasters realmente gostam dessa expressão regular. Pode classificar e organizar palavras-chave com base no número de palavras usadas em uma pesquisa.

Isto pode ser numericamente específico (isto é, apenas 5 palavras) ou pode corresponder a um intervalo de palavras (ou seja, 2 ou mais palavras). Quando usado para classificar dados de análise, essa é uma expressão poderosa. (Fonte)

10. Encontre uma String Base64 Válida em PHP

? \ Php [\ t] eval \ (base64_decode \ (\ '(([A-Za-Z0-9 + /] 4) * ([A-Za-Z0-9 + /] 3 = | [A-Za-z0-9 + /] 2 ==)?) 1 \ '\) \) \;

Se você é um desenvolvedor PHP, então em algum momento você pode precisar analisar código procurando por objetos binários codificados em Base64. Este snippet pode ser aplicado a todo o código PHP e irá verificar se há alguma string Base64 existente. (Fonte)

11. Número de telefone válido

^ \ +? \ d 1,3? [-.]? \ (? (?: \ d 2,3) \)? [-.]? \ d \ d \ d [-.]? \ d \ d \ d \ d $

Curto, doce e direto ao ponto. Este código de regex validará qualquer sintaxe de número de telefone tradicional baseada principalmente no estilo americano de números de telefone.

Como isso pode se tornar um assunto bastante complicado, recomendo que você use o tópico Stack para obter respostas mais detalhadas. (Fonte)

12. Espaço em Branco Líder & Trailing

^ [\ s] + | [\ s] + $

Use este trecho de código para extrair o espaço em branco inicial / final de uma string. Isso pode não ser grande coisa, mas às vezes pode afetar a saída quando extraída de um banco de dados ou aplicada a outra codificação de documento. (Fonte)

13. Puxar Fonte da Imagem)

\< *[img][^\>] * [src] * = * [\ "\ '] 0,1 ([^ \" \' \>] *)

Se por algum motivo você precisar extrair a fonte de uma imagem diretamente do HTML, esse trecho de código é a solução perfeita. Embora possa ser executado suavemente no backend, os desenvolvedores JS frontend devem confiar no método .attr () do jQuery para o frontend. (Fonte)

14. Validar Data no formato DD / MM / AAAA

^ (:( ?: 31 (\ / | - |?.? \) (?: 0 [13578] | 1 [02])) | (? :( ?: 29 | 30) \ 1 (\ / | - | \.) (?: 0? [1,3-9] | 1 [0-2]) \ 2)) (? :( ?: 1 [6-9] | [2-9] \ d)? \ d 2) $ | ^ (?: 29 (\ / | - | \.) 0? 2 \ 3 (? :(? :(?: 1 [6-9] | [2-9] \ d ) (?: 0 [48] |? [2468] [048] | [13579] [26]) | (:( ?: 16 |? [2468] [048] | [3579] [26]) 00)) )) $ | ^ (?: 0? [1-9] | 1 \ d | 2 [0-8]) (\ / | - | \.) (? :( ?: 0? [1-9]) | (?: 1 [0-2])) \ 4 (? :( ?: 1 [6-9] | [2-9] \ d)? D 2) $

Datas são complicadas porque podem aparecer como texto + números, ou apenas como números com formatos diferentes. O PHP tem uma função de data fantástica, mas nem sempre é a melhor escolha ao extrair uma string bruta. Considere, em vez disso, usar essa expressão regular para essa sintaxe de data específica. (Fonte)

15. Correspondência de ID do vídeo do YouTube

/http:\/\/(?:youtu\.be\/|(?:[az]2,3\.)?youtube\.com\/watch(?:\?|#\!)v =) ([\ w -] 11). * / gi

O YouTube manteve a mesma estrutura de URL por anos, porque simplesmente funciona. É também o site de compartilhamento de vídeos mais popular na Web. Por isso, os vídeos do YouTube tendem a gerar mais tráfego.

Se você precisar extrair um ID de vídeo do YouTube de um URL, esse código regex é perfeito e deve funcionar perfeitamente para todas as variantes das estruturas de URL do YouTube. (Fonte)

16. ISBN válido

/ \ b (?: ISBN (? ::? |))? ((?: 97 [89])? \ d 9 [\ dx]) \ b / i

Livros impressos seguem um sistema de numeração conhecido como ISBN. Isso pode ser bastante complicado quando você considera as diferenças entre o ISBN-10 e o ISBN-13.

No entanto, este trecho incrível permite que você valide um número ISBN e verifique se é ISBN10 ou 13. Todo o código é escrito em PHP, portanto, isso deve ser excepcionalmente útil para desenvolvedores da web. (Fonte)

17. Verifique o código postal

^ \ d 5 (?: [- \ s] \ d 4)? $

O criador desse trecho não só liberou seu trabalho de graça, mas também dedicou tempo para explicá-lo. Você encontrará este snippet útil se estiver combinando com um CEP típico de 5 dígitos ou com a versão mais longa de 9 dígitos.

Tenha em mente que isso se destina principalmente ao sistema americano de códigos postais, portanto, isso pode exigir ajustes em outros países. (Fonte)

18. Nome de Usuário do Twitter válido

/ @ ([A-Za-z0-9 _] 1,15) /

Aqui está um pequeno trecho de código para correspondência com nomes de usuários do Twitter encontrados em uma string. Ele verifica @menção sintaxe que é perfeita para escanear automaticamente o conteúdo de um tweet (ou tweets). (Fonte)

19. Números de Cartão de Crédito

^ (?: 4 [0-9] 12 (?: [0-9] 3)? | 5 [1-5] [0-9] 14 | 6 (?: 011 | 5 [ 0-9] [0-9]) [0-9] 12 | 3 [47] [0-9] 13 | 3 (?: 0 [0-5] | [68] [0-9 ]) [0-9] 11 | (?: 2131 | 1800 | 35 \ d 3) \ d 11) $

A validação de um número de cartão de crédito geralmente requer uma plataforma segura hospedada em outro lugar on-line. Mas o regex pode ser usado para os requisitos mínimos de um número típico de cartão de crédito.

Uma lista mais abrangente de códigos para cartões individuais pode ser encontrada aqui. Isso inclui Visa, MasterCard, Discover e muitos outros. (Fonte)

20. Encontre os Atributos do CSS

^ \ s * [a-zA-Z \ -] + \ s * [:] 1 \ s [a-zA-Z0-9 \ s. #] + [;] 1

Pode ser raro rodar regex sobre CSS, mas também não é uma situação incrivelmente estranha.

Esse snippet de código pode ser usado para extrair todas as propriedades e valores CSS correspondentes de seletores individuais. Ele pode ser usado por vários motivos, possivelmente para exibir blocos de CSS ou para remover propriedades duplicadas. (Fonte)

21. Strip HTML Comments

Se por qualquer razão você precisar remover todos os comentários de um bloco de HTML, esse é o código de regex a ser usado. Junto com a expressão, você encontrará um exemplo PHP usando preg_replace. (Fonte)

22. URL do perfil do Facebook

/(?:http:\/\/)?(?:www\.)?facebook\.com\/(?:(?:\w)*#!\/)?(?:pages\/)? (?: [\ w \ -] * \ /) * ([\ w \ -] *) /

O Facebook é incrivelmente popular e passou por muitos esquemas de URL diferentes. Em uma situação em que você está pegando URLs de perfil de usuários, pode ser útil analisar as strings e confirmar se elas estão estruturadas corretamente. Esse snippet pode fazer exatamente isso e é perfeito para todos os links no estilo FB. (Fonte)

23. Verifique a versão do Internet Explorer

^. * MSIE [5-8] (?: \. [0-9] +)? (?!. * Trident \ / [5-9] \. 0). * $

A mudança da Microsoft para o Edge não foi unânime e muitas pessoas ainda confiam no Internet Explorer clássico. Os desenvolvedores geralmente precisam verificar versões do IE para lidar com inconsistências com mecanismos de renderização..

Esse snippet pode ser usado em JavaScript para testar um agente de navegador com base na versão do Internet Explorer (5-11) que está sendo usada. (Fonte)

24. Preço de Extração

/(\$[0-9,]+(\.[0-9]2)?)/

O preço vem em vários formatos que contêm decimais, vírgulas e símbolos monetários. Essa expressão regular pode verificar todos esses formatos diferentes para extrair um preço de qualquer string. (Fonte)

25. Analisar cabeçalho de email

/\b[A-Z0-9._%+-]+@(?:[A-Z0-9-]+\.)+[A-Z]2,6\b/i

Com essa linha única de código, você pode analisar um cabeçalho de email para retirar “para” informações do cabeçalho. Ele pode ser usado em conjunto com vários e-mails reunidos.

Se preferir evitar o regex para essa tarefa, você pode confiar em uma biblioteca de análise. (Fonte)

26. Combine um tipo de arquivo específico

/^(.*\.(?!(htm|html|class|js)$))?[^.]*$/i

Quando você está lidando com vários formatos de arquivo, como .xml, .html e .js, pode ajudar a verificar os arquivos localmente e enviados pelos usuários. Esse snippet extrai uma extensão de arquivo para verificar se é válida a partir de uma série de extensões válidas que podem ser alteradas conforme necessário. (Fonte)

27. Combine uma cadeia de URL

/[-a-zA-Z0-9@:%_\+.~#?&//=]2,256\.[az]2,4\b(\/[-a-zA-Z0 -9 @:% _ \ +. ~ #? & // =] *)? / Gi

Esse snippet pode ser usado para strings HTTPS e HTTP para verificar se o texto corresponde à sintaxe tradicional do domínio do TLD. Há também uma implementação simples desse regex usando o RegExp do JavaScript. (Fonte)

28. Anexar rel =”não siga” para links

(] *) (href = "https?: //) ((?! (?: (?: www \.)? '. implode (' | (?: www \.)? ', $ follow_list).') ) [^ "] +)" ((?!. * \ brel =) [^>] *) (?: [^>] *)>

Se você estiver trabalhando com um lote de código HTML, pode ser horrível aplicar o trabalho manual em tarefas repetitivas. Expressões regulares são perfeitas para esta ocasião e vão poupar muito tempo.

Esse snippet pode puxar todos os links de âncora de um bloco de HTML e anexar o rel =”não siga” atributo para cada elemento. O desenvolvedor que escreveu esse código teve a gentileza de publicar a expressão bruta mais um exemplo de trabalho em PHP.

29. Correspondência de Consulta de Mídia

/ @ media ([^ ] +) \ ([\ s \ S] +?) \ s * / g

Divida as consultas de mídia CSS em seus parâmetros e propriedades. Isso pode ajudá-lo a analisar o CSS externo de maneira mais clara, com um foco mais direto em como o código opera. (Fonte)

30. Sintaxe de pesquisa do Google

/([+-]?(?:'.+?'|".+?"|[^+-] 1 [^] *)) / g

Você pode criar seu próprio código de regex para manipular texto pesquisável usando a sintaxe de marca registrada do Google. O sinal de adição (+) indica palavras-chave adicionais e o sinal de menos (-) indica palavras que devem ser ignoradas e removidas dos resultados.

É um trecho bastante complicado, mas usado corretamente, pode fornecer uma base para construir seu próprio algoritmo de busca. (Fonte)

Embrulhar

O caminho para dominar o regex é longo, mas recompensador se você ficar com ele. Além das ferramentas típicas de regex, a melhor maneira de estudar é através da repetição. Tente criar aplicativos da Web que dependem desses snippets de regex para saber como eles funcionam em um aplicativo da Web real. E se você tiver outros trechos para sugerir, você pode publicá-los na área de comentários abaixo.

Agora lê:

50 trechos úteis de CSS que todo designer deve ter