Получить hash js

"Получить hash js". Получим якорь/решетку/hash из адресной строки с помощью javascript. Рассмотрим несколько примеров получения hash-а.

Подробно о получении и выводе якоря/решетки/hash-а

1. Теория получения hash-а javascript.
2. Пример получения hash-а javascript.
3. Пример получения hash-а javascript 2.
4. Пример получения hash-а javascript без решетки.

Теория получения hash-а javascript.

С помощью javascript можно получить и вывести "якорь/решетку/hash" на экран. Для этого вам понадобится:

Первое - естественно тег script.

Получить все содержимое адресной строки включая hash.

Передать полученную строку в объект URL.

И далее получить из созданного объекта ваш "hash".

И выведем на экран с помощью document.write();

Соберем весь код:

Код получения hash-а javascript при загрузке страницы.

Данный код "получения hash-а" будет срабатывать только при загрузке, перезагрузки страницы.

<script>

var urlObj = new URL(window.location.href);

document.write (urlObj . hash);

</script>

Пример работы Кода получения hash-а javascript.

Если при загрузке страницы "hash" не существовал, то вы ничего не увидите... здесь получается довольно скучно!

Иначе... вы увидите полученный "hash".

Если в ниже идущей строке нет ничего смотри ниже(специально не даю ссылку, чтобы не создать hash).



Пример получения hash-а javascript.

Если выше вы не получили и не увидели "hash" и... получилось довольно скучно!

Напишем пример, который изменит положение вещей!

Для этого вам понадобится:

Теория и код из выше приведенного пункта - изменим его, чтобы было чуть-чуть интереснее...

Составим условие по которому... в зависимости от того, если/нет "hash" в строке будем выводить разную информацию!

Соберем весь код:

Код с условием есть/нет hash javascript.

Html

<span id=text></span>

Javascript

<script>

urlObj = new URL(window.location.href);

if(urlObj . hash)

{

document.write (urlObj . hash); example_hash.innerHTML = "<red>Теперь hash существует!</red>";

}

else document.write ("Вы ничего не увидите - потому, что hash не существует. <a href=https://dwweb.ru/poluchit_hash_js.html#example_hash target=_blank>нажмите здесь</a>");

</script>

Пример получения и вывода hash javascript

Разместим выше приведенный код прямо здесь:




Пример получения hash-а javascript 2.

Второй пример основан на предыдущем пункте... только чуть посложнее и без открытия страницы в новом окне.

Не буду описывать процесс получения и вывод построчно - придется писать отдельную страницу... протестируй стенд.

Ниже стенда сможешь скопировать код...

Тестовый стенд для тестирования получения и вывода решетки/якоря/hash-а

Сделал отдельную кнопку, которая позволит увидеть адресную строку с hash и далее получить и вывести его.

Показать адресную строку с хешем/якорем/решеткой. Получи hash из адресной строки.

Код:

Html

<a name="no_go"></a>

<h2>Стенд получения и вывода решетки/якоря/hash-а</h2>

<div class="kod" id="example"></div>

<button id="show_hash" class="width_100">Показать адресную строку с хешем/якорем/решеткой.</button>

<span id=is_hash></span>

<button id="get_hash" class="width_100">Получи hash из адресной строки.</button>

Javascript

<script>

var urlObj;

show_hash.onclick = function()

{

urlObj = new URL(window.location.href);

if(urlObj . hash) { example.innerHTML = window.location.href; is_hash.innerHTML=""; }

else is_hash.innerHTML = "<blackblock><a href=\"#no_go\">hash - еще не существует! Нажми на меня!</a></blackblock>";

}

get_hash. onclick = function()

{

urlObj = new URL(window.location.href);

if(urlObj . hash)

{

example.innerHTML = urlObj . hash ;

}

else is_hash.innerHTML = "<blackblock><a href=\"#no_go\">hash - еще не существует! Нажми на меня!</a></blackblock>";

}

</script>

Css:

<style>

.blackblock{

background: black;

color: #fbff00;

font-size: 25px;

text-align: center;

display: block;

padding: 20px 0;

margin: 10px 0;

}

red {

color: red;

}

.width_100 {

width: 100%;

padding: 10px 0;

margin: 10px 0;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

</style>




Пример получения hash-а javascript без решетки.

Для того, чтобы получить и вывести hash в javascript без решетки вам понадобится:

Код и тория предыдущего пункта и нужно заменить пару строк в коде!

В коде, где есть проверка существования hash - заменяем все содержание внутри условия:

+ вам понадобится удалить решетку с помощью slice.

if(urlObj . hash)
{
example.innerHTML = urlObj . hash . slice(1);
}

Тестовый стенд для тестирования hash-а без решетки

Аналогично получение и вывод hash-а, но только без решетки...

Показать адресную строку с хешем/якорем/решеткой. Получи hash из адресной строки без решетки.