06.04.2025

Convertendo Caminhos Relativos em Absolutos: JavaScript

Resposta Rápida

Você pode facilmente transformar URLs relativas em absolutas usando o construtor new URL(). Esse método é suportado em navegadores modernos. Basta fornecer um caminho relativo e document.baseURI como argumentos:

let urlAbsoluta = new URL(caminhoRelativo, document.baseURI).href;

O comando acima converte instantaneamente caminhos relativos em URLs absolutas completas.

Compreendendo a API URL

A API URL é a ferramenta perfeita para trabalhar com URLs relativas e absolutas em JavaScript. É rápida e fácil de usar, e lida automaticamente com os caminhos, liberando você dessa tarefa manual:

• Processamento de caracteres especiais: Caracteres como . ou .., que representam diretórios atuais ou pai, são imediatamente tratados pela API URL.
• Eliminação de peculiaridades de strings de consulta: Sua URL possui uma string de consulta ou um fragmento? A API URL pode lidar com isso facilmente.
• Gerenciamento do protocolo: Se sua URL começa com //, a API URL determinará o protocolo correto sem problemas.

Para realizar a conversão, basta especificar o caminho relativo e a URL base:

let caminhoAbsoluto = new URL('fotos/cachorrinho.jpg', 'http://animaisfofos.com/').href;
// Resultado: 'http://animaisfofos.com/fotos/cachorrinho.jpg'

Agora sua URL está pronta para uso!

No Mundo Real Sem a API URL

Às vezes, por exemplo em um navegador, você pode precisar lidar com a conversão de caminhos por conta própria. Nesses casos, os seguintes métodos podem ser úteis:

A Função caminhoAbsoluto

Esta função, criada por você, utiliza operações de string para converter caminhos que incluem .. e .:

function caminhoAbsoluto(base, relativo) {
    var pilha = base.split("/"),
        partes = relativo.split("/");
    pilha.pop(); // Remove o último elemento (assumindo que a base é um diretório)

    for (var i = 0; i < partes.length; i++) {
        if (partes[i] === ".")
            continue;
        if (partes[i] === "..")
            pilha.pop();
        else
            pilha.push(partes[i]);
    }
    return pilha.join("/");
}

Usando document.baseURI

A propriedade document.baseURI retorna a URL base atual do documento:

let caminhoAbsolutoDinâmico = caminhoAbsoluto(document.baseURI, 'caminho/para/recurso');

Protegendo a Função de Erros

Certifique-se de que sua função pode lidar com entradas inválidas adequadamente:

if (!entradaValida(caminhoBase, caminhoRelativo)) {
    return null; // "Infelizmente, a navegação neste endereço não existe."
}

Essa abordagem protege contra erros em tempo de execução.

Visualização

Vamos dar uma olhada em uma representação visual do processo de conversão:

Caminho Relativo: 'cafe/shop.jpg'
URL Base: 'http://www.mapasdacidade.com/centro/'

Após a conversão, teremos o caminho absoluto:

+-----------------------------+     +-----------------------------------------+
| URL Base (Início)          | --> | Caminho Absoluto (Destino)             |
+-----------------------------+     +-----------------------------------------+
| http://www.mapasdacidade.com/centro/ |  http://www.mapasdacidade.com/centro/cafe/shop.jpg |

Use JavaScript como sua bússola para encontrar o caminho:

let caminhoAbsoluto = new URL(caminhoRelativo, urlBase).href;

Você definiu com sucesso o caminho!

Além do Código

Trabalhando com Protocolos Não Padrão

Em ambientes não navegadores, lidar com vários protocolos pode exigir atenção adicional. Tenha isso em mente para evitar erros ao trabalhar com esses protocolos.

Considerando Barras Finais

De maneira geral, barras finais em URLs base ou caminhos relativos podem afetar o resultado. Portanto, é importante que sua função lide corretamente com esses casos:

if (base.charAt(base.length - 1) !== '/') {
    base += '/';
}

Evitando Bibliotecas Redundantes

Elimine dependências desnecessárias preferindo JavaScript limpo para máxima compactação do código.

Recursos Úteis

1. <a>: Links em HTML — Informações sobre tags âncoras e criação de links.
2. API de Localização da Janela — Tudo sobre como gerenciar URLs com a propriedade location.
3. Método createElement() no DOM — Detalhes sobre a criação de elementos HTML em JavaScript.
4. Sobre Caminhos Relativos e Absolutos — Como funcionam caminhos relativos e absolutos em desenvolvimento web.
5. Convertendo URL Relativa em Absoluta — Discussão sobre métodos para converter URLs.
6. URI.js - Trabalhando com URLs em JavaScript — Um guia para trabalhar com URIs.
7. Convertendo Caminhos em JavaScript — Métodos para lidar com caminhos relativos.

Video

Navigation