Validador de URL Regex em JavaScript

O que é URL Regex em JavaScript?

Em JavaScript, um regex de URL (expressão regular) é usado para verificar se uma determinada string segue a estrutura de um endereço web válido. Isso pode incluir links HTTP ou HTTPS, nomes de domínio e caminhos ou parâmetros de query opcionais.

Todas as URLs válidas seguem um padrão específico.

Elas têm três partes principais:

• Protocolo (como http ou https)

• Nome de domínio (ou às vezes um endereço IP)

• Porta e caminho (a porta geralmente é opcional, enquanto o caminho especifica a localização do recurso)

Um regex bem construído ajuda a garantir que cada um desses componentes esteja presente e formatado corretamente. Regex ajuda desenvolvedores a filtrar links inválidos ou malformados em entradas de usuário, APIs e formulários.

Padrões de URL regex são úteis para:

• Validar links em formulários e entradas de usuário

• Extrair URLs de texto ou logs

• Limpar e processar dados em scripts de web scraping ou automação

• Impedir que links inválidos sejam enviados aos servidores

O que Torna uma URL Válida?

Todas as URLs válidas seguem um padrão específico. Elas têm três partes principais:

• Protocolo: Especifica o método usado para acessar o recurso (por exemplo, http, https).

• Nome de domínio (ou endereço IP): O endereço único do site ou recurso.

• Porta e caminho (opcionais): Detalhes adicionais como número de porta e o caminho ou arquivo específico no servidor.

Padrão Comum de URL Regex (JavaScript)

Um regex comumente usado para validação básica de URL é:

/^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/[\w\-._~:/?#[\]@!$&'()*+,;=]*)?$/

Este padrão verifica:

• http ou https opcional

• Um nome de domínio válido

• Um caminho e query string opcionais

Como Validar URLs em JavaScript com Regex

Veja como usar regex para validar uma URL em JavaScript:

function isValidURL(url) {
  const urlPattern = /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/[\w\-._~:/?#[\]@!$&'()*+,;=]*)?$/;
  return urlPattern.test(url);
}
// Test
console.log(isValidURL("https://example.com"));           // true
console.log(isValidURL("http://my.site/path?q=1"));       // true
console.log(isValidURL("invalid-url"));                   // false

Exemplos de URLs Válidas e Inválidas

Validando URLs com o Objeto URL do JavaScript

Se você quiser uma solução mais robusta e nativa, o objeto URL do JavaScript é seu aliado. Ele faz a maior parte do trabalho pesado e analisa corretamente até URLs complicadas, sem precisar se preocupar com casos extremos ou padrões complexos.

Veja como funciona: você pode criar uma função utilitária que simplesmente tenta criar um novo objeto URL a partir da entrada. Se a string não for uma URL válida, o construtor lançará um erro, que você pode usar para detectar entradas inválidas.

Abordagens de Validação de URL

Embora regex seja uma escolha popular para validação de URL, o JavaScript oferece algumas abordagens diferentes, cada uma com seus próprios benefícios:

1. Usando Expressões Regulares (Regex)

Padrões regex são amplamente usados para verificar rapidamente a estrutura de URLs. O padrão acima verifica:

• Um protocolo http ou https opcional

• Um ou mais subdomínios e nomes de domínio válidos

• Uma extensão de domínio com pelo menos dois caracteres

• Caminhos, parâmetros de query ou fragmentos opcionais

Regex é ótimo para validação leve e fácil integração em formulários simples ou scripts.

2. Usando o Construtor URL

O objeto nativo do JavaScript fornece uma forma robusta de validar e analisar URLs sem escrever padrões personalizados:

function isValidURL(url) {
try {
new URL(url);
return true;
} catch (err) {
return false;
}
}

Este método é confiável, trata casos extremos e é recomendado quando você precisa de validação abrangente.

3. Usando Pacotes de Terceiros

Para projetos que requerem validação mais avançada, considere pacotes npm como is-url ou is-url-http para regras mais rígidas.

Por que Usar o Objeto URL para Validação?

• Precisão: O objeto URL segue as regras oficiais de análise de URL, tratando facilmente casos extremos que regex frequentemente perde.

• Legibilidade: Usar o objeto URL torna o código mais fácil de entender e manter.

• Tratamento de Erros: Lança um erro claro se a entrada não for uma URL válida.

• Flexibilidade: Quer extrair o hostname, pathname ou parâmetros de query? O objeto URL permite acessar partes de uma URL diretamente.

Validando URLs com Pacotes npm

Projetos Node.js modernos frequentemente dependem de pacotes npm populares para validação de URL rápida e confiável. Duas bibliotecas amplamente usadas são is-url e is-url-http.

import isUrl from 'is-url';
console.log(isUrl("https://www.example.com")); // true
console.log(isUrl("http://example.com"));      // true
console.log(isUrl("www.example.com"));         // false
console.log(isUrl("invalid-url"));             // false

import isUrlHttp from 'is-url-http';
// Examples
isUrlHttp("https://www.example.com"); // returns true
isUrlHttp("http://example.com");      // returns true
isUrlHttp("www.example.com");         // returns false
isUrlHttp("invalid-url");             // returns false

Dicas Profissionais para URL Regex em JavaScript

• Use grupos não capturadores quando não precisar extrair sub-correspondências. Melhora a performance.

• Combine com o Testador de Regex JavaScript para testar padrões complexos interativamente.

• Evite padrões excessivamente estritos, algumas URLs válidas podem ser bloqueadas inadvertidamente.

• Normalize a entrada antes de validar (por exemplo, removendo espaços em branco).

• Use junto ao Gerador de Token para validar URLs contendo tokens de acesso ou ao Codificador Base64 para componentes de URL seguros.

Metacaracteres Regex Utilizados

• ^: Ancora a correspondência no início da string

• $: Ancora a correspondência no final da string

• ?: Marca o token anterior como opcional

• (): Grupo de captura

• (?:): Grupo não capturador

• []: Conjunto de caracteres

• .: Corresponde a qualquer caractere exceto nova linha

• +: Corresponde a uma ou mais ocorrências

• *: Corresponde a zero ou mais ocorrências

• /: Barra escapada (para componentes de caminho)

Combine com Estas Ferramentas

• Testador de Regex JavaScript - Teste qualquer padrão ao vivo.

• Gerador de Token - Valide parâmetros de URL tokenizados.

• Codificador Base64 - Codifique dados dentro de URLs.

• Validador de UUID Regex em JavaScript - Corresponda UUIDs usados em URLs RESTful.

• Validador de Email Regex em JavaScript - Valide endereços de email frequentemente vinculados em formulários.

• Validador de Telefone Regex em JavaScript - Para formulários de contato que incluem campos de telefone e URL.