Як отримати якір з URL за допомогою jQuery?


184

У мене є така URL-адреса:

www.example.com/task1/1.3.html#a_1

Як я можу отримати a_1значення якоря за допомогою jQuery і зберегти його як змінну?

Відповіді:


207

Ви можете використовувати .indexOf()та .substring(), як це:

var url = "www.aaa.com/task1/1.3.html#a_1";
var hash = url.substring(url.indexOf("#")+1);

Ви можете спробувати тут , якщо він може не мати #в ньому, зробіть if(url.indexOf("#") != -1)перевірку так:

var url = "www.aaa.com/task1/1.3.html#a_1", idx = url.indexOf("#");
var hash = idx != -1 ? url.substring(idx+1) : "";

Якщо це поточна URL-адреса сторінки, ви можете просто скористатися window.location.hashнею та замінити її, #якщо хочете.


10
Зверніть увагу: щоб отримати хеш-значення головного вікна всередині iFrame, вам потрібно скористатися window.top.location.hashнатомість.
Паоло Штефан

1
url.split("#").pop() - Повільніше, але легше.
Ifch0o1

490

Для поточного вікна ви можете використовувати це:

var hash = window.location.hash.substr(1);

Щоб отримати хеш-значення головного вікна , скористайтеся цим:

var hash = window.top.location.hash.substr(1);

Якщо у вас є рядок з URL-адресою / хешем, найпростішим методом є:

var url = 'https://www.stackoverflow.com/questions/123/abc#10076097';
var hash = url.split('#').pop();

Якщо ви використовуєте jQuery, використовуйте це:

var hash = $(location).attr('hash');

1
Елегантна відповідь. Чи є випадки, коли це не працює?
sscirrus

2
версія ярлика - var hash = window.location.hash.substr(1);оскільки JS мають обидві функції substr / substring, вони різні, але в цьому випадку однакові.
Артур Кушман

який найкращий спосіб слідкувати за змінами цього, тобто. хтось натиснув посилання на внутрішній сторінці?
Rid Iculous

5
@RidIculous спробуйте це: $ (window) .on ('hashchange', function () {$ ('h1'). Text (location.hash.slice (1));});
Сільвіо Дельгадо

71

Використовуйте

window.location.hash

щоб отримати все, що не входить, включаючи #


15
Не забудьте використовувати, location.hash.slice(1)якщо ви не хочете хеш-тег у заключній строці!
Сенді Гіффорд

39

jQuery стиль:

$(location).attr('hash');

7
не кожну проблему JavaScript потрібно вирішувати за допомогою jquery.
doxin

22
@doxin Я згоден, але питання "Як отримати якір з URL-адреси за допомогою jQuery?"
Валентин Е

10

Ви можете скористатися наступним "трюком", щоб проаналізувати будь-яку дійсну URL-адресу. Він використовує особливі властивості елемента якоря , пов'язані з href,hash .

З jQuery

function getHashFromUrl(url){
    return $("<a />").attr("href", url)[0].hash.replace(/^#/, "");
}
getHashFromUrl("www.example.com/task1/1.3.html#a_1"); // a_1

З простим JS

function getHashFromUrl(url){
    var a = document.createElement("a");
    a.href = url;
    return a.hash.replace(/^#/, "");
};
getHashFromUrl("www.example.com/task1/1.3.html#a_1"); // a_1

3

Якщо у вас просто рядок URL-адреси (і, отже, немає атрибута хеша), ви також можете використовувати регулярний вираз:

var url = "www.example.com/task1/1.3.html#a_1"  
var anchor = url.match(/#(.*)/)[1] 

1
Потрібно перевірити, чи відповідає збіг результатів, перш ніж отримати доступ до другого елемента, інакше цей код стане помилковим, якщо в URL-адресі немає якоря.
Річард Гарсайд
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.