Como extrair a extensão de um arquivo no Javascript? – javascript string arquivo

Pergunta:


Existem alguns casos onde eu preciso capturar a extensão de um arquivo (isso é, uma string com endereço do arquivo) para poder validar a extensão via Javascript.

Por exemplo do location:

var path = window.location.pathname;
// /foo/bar.html

No caso quero pegar o html.

Existe o caso também de tratar a extensão de um elemento link, exemplo:

var path = document.querySelector('link').src;
// http://algum.site/css/estilo.css

No caso teria de retornar o css.

Qual melhor forma de obter essa extensão?

Considerados os casos de URL:

'foo/bar.ext'     // 'ext'
'foo.bar/zaz.ext' // 'ext'
'foo.bar/sem_ext' // ''
'.sem_ext'        // ''
'foo/.sem_ext'    // ''

Autor da pergunta Gabriel Gartz

Comunidade

Para obter a extensão de um arquivo de maneira pratica uso:

var ext = path.split('.').pop();

No caso o split dividiu o path em um array e o pop vai remover e retornar o último elemento desta array, exatamente a extensão que procuro.

Uma versão mais precisa seria:

// Pegar somente a ultima parte, afinal podem ter pastas com . no caminho
var ext = path.split('/').pop();
// se não houver extensão, retorna vazio, se houver retorna a extensão
// sendo que .htaccess é um arquivo escondido e não uma extensão
ext = ext.indexOf('.') < 1 ? '' : ext.split('.').pop();

Porém também é possível faze-lo utilizando lastIndexOf com algumas operações matemáticas para obter melhor performance, exemplo:

function ext(path) {
    var idx = (~-path.lastIndexOf(".") >>> 0) + 2;
    return path.substr((path.lastIndexOf("/") - idx > -3 ? -1 >>> 0 : idx));
}

Nesta segunda solução, eu utilizei o conceito apresentado pelo bfavaretto porém de uma forma pouca coisa mais performática.

Explicando a segunda solução

Primeiro achamos a posição do ., mas como vamos usar o substr em seguida, é importante saber que no substr se você colocar um valor maior que a string, ele vai retornar vazio.

Então a gente usa o operador - pra transformar o valor em negativo.

Em seguida o operador ~ que vai inverter o valor binário (ex: 0010 vira 1101) essa operação é feita dessa forma exatamente para pular se o arquivo começa com . ou se não tiver . nele dar um valor negativo.

Com o operador >>> a gente esta movendo o posicionamento em bits dentro de valor não assinado (positivo), o que no caso de ser negativo pra 0 vai dar o maior inteiro possível menos o valor que está sendo passado no resultado do calculo anterior e se for positivo nada vai acontecer ser alterado.

Então soma-se 2 pra compensar as operações ~- no final.

Na linha seguinte temos uma condicional para que o da posição da ultima / seja menor que a ultima posição de ponto ou caso seja um ponto em seguida, por isso o menor que -3, de forma aplicar a mesma lógica para o substr caso o valor seja invalido dando um número muito grande pra ele.

A lógica para se extrair a extensão com esses requisitos é isolar a última parte do caminho, e verificar:

  • Se ela está em branco, começa com ponto ou não contém ponto: retorna ''.
  • Senão: retorna o que vier após o ponto.

Você pode quebrar o caminho em arrays, como demonstrado pelo Gabriel Gartz. É a maneira mais simples.

Uma opção que não envolve arrays, somente com manipulação de strings, costuma ser mais performática. Trata-se de usar lastIndexOf para para quebrar o caminho:

function ext(path) {
    var final = path.substr(path.lastIndexOf('/')+1);
    var separador = final.lastIndexOf('.');
    return separador <= 0 ? '' : final.substr(separador + 1);
}

Gosto da abordagem com expressões regulares:

function getExtension(path) {
  var r = /.([^./]+)$/.exec(path);
  return r && r[1] || '';
}

A expressão regular irá procurar por um “ponto”, seguido de quaisquer outros caracteres, exceto outro ponto ou uma barra. O $ no final da expressão exige que seja o final da string.

Se esse padrão for encontrado na string, a função irá retornar a 1ª captura, ou seja, as letras seguindo o último ponto. Caso contrário, irá retornar string vazia.

Explicação regexper

Como você quer levar em conta arquivos sem extensão, como no caso do “.htaccess”, requer um pouco mais de código:

var filename = window.location.pathname.split('/')[window.location.pathname.split('/').length-1].split('.');
var ext = filename[0].length > 0 ? filename[1] : '';
alert(ext)

Fonte

Related Posts:

Qual a diferença entre AppCompatActivity e Activity? – android android-activity
Pergunta: Qual a diferença da AppCompatActivity para Activity ? A partir de qual versão a AppCompatActivity foi adicionada ao Android? Autor da pergunta Luhhh A diferença reside ...
Como abreviar palavras em PHP? – php string
Pergunta: Possuo informações comuns como nome de pessoas e endereços, e preciso que elas contenham no máximo 30 caracteres sem cortar palavras. Exemplo: 'Avenida Natalino João Brescansin' ...
Qual é a finalidade de um parêntese vazio numa declaração Lambda? – c# expressões-lambda característica-linguagem
Pergunta: Criei um exemplo de uma declaração Lambda sem argumentos, entretanto, estou com duvidas referente a omissão do parêntese vazio () na declaração. Veja o exemplo: class ...
Boas práticas para URI em API RESTful – api rest restful
Pergunta: Estou com dúvida em relação às URIs de alguns recursos da api que estou desenvolvendo. Tenho os recursos projetos e atividades com relação 1-N, ...
Dúvidas sobre a integração do MySQL com Java – java mysql netbeans
Pergunta: Estou criando um sistema no NetBeans, utilizando a linguagem Java e o banco de dados MySQL. Escrevi o seguinte código para realizar a conexão ...
Qual é a finalidade da pasta Model do framework Inphinit? – php inphinit
Pergunta: No Inphinit micro-framework existe a pasta Model que fica dentro da pasta application, e nela é onde ficam as classes, mas eu estou muito ...
Uso do ‘@’ em variáveis – javascript typescript coffeescript
Pergunta: Vejo em algumas linguagens que compilam para javascript, como TypeScript e CoffeeScript, o uso do @ em variáveis, como também, casos em que o ...
Qual tamanho máximo um arquivo JSON pode ter? – json arquivo
Pergunta: Vou dar um exemplo para conseguir explicar minha duvida: Preciso recuperar informação de imagens vindas de uma API, esse banco de imagens me retorna JSON's ...
O que é Teste de Regressão? – terminologia engenharia-de-software testes
Pergunta: Na matéria de Teste de Software o professor abordou um termo chamado Teste de Regressão, isto dentro da disciplina de teste de software. Sendo ...
O que é um construtor da linguagem? – php característica-linguagem
Pergunta: Em PHP, já li e ouvi várias vezes a respeito dos Construtores da Linguagem. Os casos que sempre ouvi falar deles foi em casos ...
Função intrínseca para converter numérico para string – cobol
Pergunta: Estou a tentar saber se existe alguma função intrínseca do COBOL para converter um data numérico para string sem precisar usar a cláusula REDEFINES: ( ...
Porque usar implements? – java android
Pergunta: Qual a diferença entre usar btn.setOnClickListener(new OnClickListener() { e public class MainActivity extends Activity implements OnClickListener{ Estive fazendo um curso de Android e meu professor falou que ...
O que é XHTML e quando deve ser usado? – html xml xhtml
Pergunta: O que eu sei é que o XHTML precisa ser XML válido. Isso implica, por exemplo, que todas as tags precisam ser fechadas. Por ...
Uma placa aceleradora de vídeo pode melhorar o desempenho não-gráfico? [fechada] – desempenho
Pergunta: Para desenvolver em Ruby on Rails, eu utilizo aqui uma máquina virtual do VirtualBox com Ubuntu Server 14.04 sem interface gráfica instalada. Recentemente descobri uma ...
Concat() VS Union() – c# .net
Pergunta: Qual a diferença entre Concat() e Union() ? Quando usar Concat() e quando usar Union() ? Somente pode ser usado em list ? ...

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *