Bagaimana Anda memeriksa # haso di URL menggunakan JavaScript?

Saya memiliki beberapa kode jQuery / JavaScript yang ingin saya jalankan hanya ketika ada #tautan anchor ( ) anchor di URL. Bagaimana Anda bisa memeriksa karakter ini menggunakan JavaScript? Saya perlu uji tangkap sederhana yang akan mendeteksi URL seperti ini:

• example.com/page.html#anchor
• example.com/page.html#anotheranchor

Pada dasarnya sesuatu seperti:

if (thereIsAHashInTheUrl) {        
    do this;
} else {
    do this;
}

Jika ada yang bisa mengarahkan saya ke arah yang benar, itu akan sangat dihargai.

Sederhana:

if(window.location.hash) {
  // Fragment exists
} else {
  // Fragment doesn't exist
}

  if(window.location.hash) {
      var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
      alert (hash);
      // hash found
  } else {
      // No hash found
  }

Masukkan yang berikut ini:

<script type="text/javascript">
    if (location.href.indexOf("#") != -1) {
        // Your code in here accessing the string like this
        // location.href.substr(location.href.indexOf("#"))
    }
</script>

Jika URI bukan lokasi dokumen, cuplikan ini akan melakukan apa yang Anda inginkan.

var url = 'example.com/page.html#anchor',
    hash = url.split('#')[1];

if (hash) {
    alert(hash)
} else {
    // do something else
}

Sudahkah Anda mencoba ini?

if (url.indexOf('#') !== -1) {
    // Url contains a #
}

(Di mana urlURL yang ingin Anda periksa, tentu saja.)

$('#myanchor').click(function(){
    window.location.hash = "myanchor"; //set hash
    return false; //disables browser anchor jump behavior
});
$(window).bind('hashchange', function () { //detect hash change
    var hash = window.location.hash.slice(1); //hash to string (= "myanchor")
    //do sth here, hell yeah!
});

Ini akan menyelesaikan masalah;)

window.location.hash 

akan mengembalikan pengidentifikasi hash

... atau ada pemilih jquery:

$('a[href^="#"]')

Inilah yang dapat Anda lakukan untuk secara berkala memeriksa perubahan hash, dan kemudian memanggil fungsi untuk memproses nilai hash.

var hash = false; 
checkHash();

function checkHash(){ 
    if(window.location.hash != hash) { 
        hash = window.location.hash; 
        processHash(hash); 
    } t=setTimeout("checkHash()",400); 
}

function processHash(hash){
    alert(hash);
}

Kebanyakan orang mengetahui properti URL di document.location. Itu bagus jika Anda hanya tertarik pada halaman saat ini. Tetapi pertanyaannya adalah tentang bagaimana cara mengurai jangkar pada halaman, bukan halaman itu sendiri.

Apa yang kebanyakan orang lewatkan adalah bahwa properti URL yang sama juga tersedia untuk elemen jangkar:

// To process anchors on click    
jQuery('a').click(function () {
   if (this.hash) {
      // Clicked anchor has a hash
   } else {
      // Clicked anchor does not have a hash
   }
});

// To process anchors without waiting for an event
jQuery('a').each(function () {
   if (this.hash) {
      // Current anchor has a hash
   } else {
      // Current anchor does not have a hash
   }
});

function getHash() {
  if (window.location.hash) {
    var hash = window.location.hash.substring(1);

    if (hash.length === 0) { 
      return false;
    } else { 
      return hash; 
    }
  } else { 
    return false; 
  }
}

var requestedHash = ((window.location.hash.substring(1).split("#",1))+"?").split("?",1);

Komentar Partridge dan Gareths di atas sangat bagus. Mereka pantas mendapat jawaban terpisah. Rupanya, hash dan properti pencarian tersedia di objek html Link apa saja:

<a id="test" href="foo.html?bar#quz">test</a>
<script type="text/javascript">
   alert(document.getElementById('test').search); //bar
   alert(document.getElementById('test').hash); //quz
</script>

Atau

<a href="bar.html?foo" onclick="alert(this.search)">SAY FOO</a>

Jika Anda memerlukan ini pada variabel string biasa dan kebetulan memiliki jQuery, ini seharusnya berfungsi:

var mylink = "foo.html?bar#quz";

if ($('<a href="'+mylink+'">').get(0).search=='bar')) {
    // do stuff
}

(tapi mungkin sedikit berlebihan ..)

Melempar ini ke sini sebagai metode untuk mengabstraksi properti lokasi dari string mirip URI. Meskipun window.location instanceof Locationbenar, setiap upaya untuk memohon Locationakan memberi tahu Anda bahwa itu adalah konstruktor ilegal. Anda masih bisa mendapatkan hal-hal seperti hash, query, protocoldll dengan menetapkan string Anda sebagai hrefmilik elemen DOM jangkar, yang kemudian akan berbagi semua properti alamat dengan window.location.

Cara paling sederhana untuk melakukan ini adalah:

var a = document.createElement('a');
a.href = string;

string.hash;

Untuk kenyamanan, saya menulis perpustakaan kecil yang memanfaatkan ini untuk mengganti Locationkonstruktor asli dengan yang akan mengambil string dan menghasilkan window.locationobjek seperti: Location.js

Biasanya klik lebih dulu daripada perubahan lokasi, jadi setelah klik adalah ide yang baik untuk mengaturTimeOut untuk mendapatkan pembaruan window.location.hash

$(".nav").click(function(){
    setTimeout(function(){
        updatedHash = location.hash
    },100);
});

atau Anda dapat mendengarkan lokasi dengan:

window.onhashchange = function(evt){
   updatedHash = "#" + evt.newURL.split("#")[1]
};

Saya menulis plugin jQuery yang melakukan sesuatu seperti apa yang ingin Anda lakukan.

Ini adalah jangkar router sederhana.

Berikut adalah fungsi sederhana yang mengembalikan trueatau false(memiliki / tidak memiliki tagar):

var urlToCheck = 'http://www.domain.com/#hashtag';

function hasHashtag(url) {
    return (url.indexOf("#") != -1) ? true : false;
}

// Condition
if(hasHashtag(urlToCheck)) {
    // Do something if has
}
else {
    // Do something if doesn't
}

Pengembalian truedalam hal ini.

Berdasarkan komentar @ jon-skeet.

Ini adalah cara sederhana untuk menguji ini untuk URL halaman saat ini:

  function checkHash(){
      return (location.hash ? true : false);
  }

terkadang Anda mendapatkan string kueri lengkap seperti "#anchorlink? firstname = mark"

ini skrip saya untuk mendapatkan nilai hash:

var hashId = window.location.hash;
hashId = hashId.match(/#[^?&\/]*/g);

returns -> #anchorlink