Obtendo a localização de hash da URL e usando-a no jQuery

Eu gostaria de obter o valor após um hash no URL da página atual e poder aplicar isso em uma nova função ... por exemplo.

O URL pode ser

www.example.com/index.html#foo

E eu gostaria de usar isso em conjunto com o seguinte trecho de código

$('ul#foo:first').show();

Estou assumindo / esperando que exista alguma maneira de capturar isso e transformá-lo em uma variável que eu possa usar no segundo trecho de código.

Nota do editor: a abordagem abaixo tem sérias implicações de segurança e, dependendo da versão do jQuery que você está usando, pode expor seus usuários a ataques XSS. Para obter mais detalhes, consulte a discussão do possível ataque nos comentários sobre esta resposta ou nesta explicação sobre o Security Stack Exchange .

Você pode usar a location.hashpropriedade para obter o hash da página atual:

var hash = window.location.hash;
$('ul'+hash+':first').show();

Observe que essa propriedade já contém o #símbolo no início.

Na verdade, você não precisa do :firstpseudo-seletor, pois está usando o seletor de ID ; pressupõe-se que os IDs sejam únicos no DOM.

Caso deseje obter o hash de uma string de URL, você pode usar o String.substringmétodo:

var url = "http://example.com/file.htm#foo";
var hash = url.substring(url.indexOf('#')); // '#foo'

Conselho: Esteja ciente de que o usuário pode alterar o hash como ele deseja, injetando qualquer coisa no seu seletor; você deve verificar o hash antes de usá-lo.

location.hash não é seguro para o IE , no caso do IE (incluindo o IE9), se sua página contiver iframe, após a atualização manual do conteúdo do iframe obter o valor location.hash é antigo (valor para o carregamento da primeira página). enquanto o valor recuperado manual é diferente de location.hash, sempre o recupere através de document.URL

var hash = document.URL.substr(document.URL.indexOf('#')+1) 

Para quem procura uma solução javascript pura

 document.getElementById(location.hash.substring(1)).style.display = 'block'

Espero que isso poupe algum tempo.

Desde o jQuery 1.9, o :targetseletor corresponderá ao hash da URL. Então você poderia fazer:

$(":target").show(); // or $("ul:target").show();

O que selecionaria o elemento com o ID correspondente ao hash e o mostraria.

Eu sugeriria melhor cek primeiro se a página atual tiver um hash. Caso contrário, será undefined.

$(window).on('load', function(){        
    if( location.hash && location.hash.length ) {
       var hash = decodeURIComponent(location.hash.substr(1));
       $('ul'+hash+':first').show();;
    }       
});

Estou usando isso para resolver as implicações de segurança observadas na resposta do @ CMS.

// example 1: www.example.com/index.html#foo

// load correct subpage from URL hash if it exists
$(window).on('load', function () {
    var hash = window.location.hash;
    if (hash) {
        hash = hash.replace('#',''); // strip the # at the beginning of the string
        hash = hash.replace(/([^a-z0-9]+)/gi, '-'); // strip all non-alphanumeric characters
        hash = '#' + hash; // hash now equals #foo with example 1

        // do stuff with hash
        $( 'ul' + hash + ':first' ).show();
        // etc...
    }
});