Удаление якоря/решетки/hash javascript

Займемся удалением якоря/решетки/hash в адресной строке. Есть два варианта удаления hash... из самой адресной строки и из переменной.

Удаляем решетку / якорь / hash в строке.

1. Удаляем решетку / якорь / hash в адресной строке
2. Удаление hash в адресной строке по нажатию на кнопку...
3. Удаляем hash из url в переменной

Скопировать ссылку



Удаляем решетку / якорь / hash в адресной строке

Для удаления hash в адресной строке есть метод "history.pushState".


Синтаксис "history.pushState"

history.pushState("", document.title, window.location.pathname);

Как работает удаление решетки/ якоря/ hash в адресной строке?

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

Далее... проверим адресную строку, вы можете посмотреть в адресной строке... есть ли там hash.



Или ... я сделал отдельную кнопку, которая позволит увидеть адресную строку с hash или без него внутри блока:

Показать адресную строку.

Следующая кнопка будет использовать метод "history.pushState" :

Удали hash в адресной строке.

Теперь вы можете опять посмотреть в адресную строку... возвращаемся в пункт №3 и нажимаем опять... показать адресную строку...

Скопировать ссылку



Удаление hash в адресной строке по нажатию на кнопку...

Если вы разобрались, как и когда нажимать кнопки в предыдущем пункте, то мы можем посмотреть на код...

html :

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

<button id="show_hash">Показать адресную строку.</button>

<button id="delite_hash">Удали hash в адресной строке.</button>

javascript

<script>

show_hash.onclick = function() { example.innerHTML = window.location.href; }

delite_hash. onclick = function() {history.pushState("", document.title, window.location.pathname); }

</script>

Что мы использовали для работы скрипта удаления hash?

id

button

onclick

script

Скопировать ссылку



Удаляем hash из url в переменной

Надеюсь, что с пониманием выше приведенного материала не возникло проблем!

Но далее... предположим, что у нас есть какая-то переменная с url и hash - ем внутри...

"https://dwweb.ru/udalyaem_reshetku_yakor_hash_v_stroke.html#bottom"

Создаем новый объект URL

var url = new URL("https://dwweb.ru/udalyaem_reshetku_yakor_hash_v_stroke.html#bottom");

И ниже полученного объекта прописываем отсутствие hash:

url . hash ="";

Код для иллюстрации удаления hash из url в переменной

<script>

var url = new URL("https://dwweb.ru/udalyaem_reshetku_yakor_hash_v_stroke.html#bottom");

if(url . hash) {console.log("есть hash"); }

console.log( url );

url . hash ="";

console.log(url . href);

if(!url . hash) { console.log("нет hash"); }

</script>

Результат работы кода удаления hash:

Результат работы выше приведенного кода выведена в консоль

Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!

Сообщение системы комментирования :

Форма пока доступна только админу... скоро все заработает...надеюсь...