Как найти хеш страницы

Время на прочтение
4 мин

Количество просмотров 36K

Доброго времени суток, друзья!

Представляю Вашему вниманию перевод заметки «How to Parse URL in JavaScript: hostname, pathname, query, hash» автора Dmitri Pavlutin.

Унифицированный указатель ресурса или, сокращенно, URL — это ссылка на веб-ресурс (веб-страницу, изображение, файл). URL определяет местонахождения ресурса и способ его получения — протокол (http, ftp, mailto).

Например, вот URL данной статьи:

https://dmitripavlutin.com/parse-url-javascript

Часто возникает необходимость получить определенные элементы URL. Это может быть название хоста (hostname, dmitripavlutin.com) или путь (pathname, /parse-url-javascript).

Удобным способом получить отдельные компоненты URL является конструктор URL().

В этой статье мы поговорим о структуре и основных компонентах URL.

1. Структура URL

Изображение лучше тысячи слов. На представленном изображении Вы можете видеть основные компоненты URL:

2. Конструктор URL()

Конструктор URL() — это функция, позволяющая разбирать (парсить) компоненты URL:

const url = new URL(relativeOrAbsolute [, absoluteBase])

Аргумент relativeOrAbsolute может быть абсолютным или относительным URL. Если первый аргумент — относительная ссылка, то второй аргумент, absoluteBase, является обязательным и представляет собой абсолютный URL — основу для первого аргумента.

Например, инициализируем URL() с абсолютным URL:

const url = new URL('http://example.com/path/index.html')

url.href // 'http://example.com/path/index.html'

Теперь скомбинируем относительный и абсолютный URL:

const url = new URL('/path/index.html', 'http://example.com')

url.href // 'http://example.com/path/index.html'

Свойство href экземпляра URL() возвращает переданную URL-строку.

После создания экземпляра URL(), Вы можете получить доступ к компонентам URL. Для справки, вот интерфейс экземпляра URL():

interface URL {
  href:     USVString;
  protocol: USVString;
  username: USVString;
  password: USVString;
  host:     USVString;
  hostname: USVString;
  port:     USVString;
  pathname: USVString;
  search:   USVString;
  hash:     USVString;

  readonly origin: USVString;
  readonly searchParams: URLSearchParams;

  toJSON(): USVString;
}

Здесь тип USVString означает, что JavaScript должен возвращать строку.

3. Строка запроса (query string)

Свойство url.search позволяет получить строку запроса URL, начинающуюся с префикса ?:

const url = new URL(
    'http://example.com/path/index.html?message=hello&who=world'
)

url.search // '?message=hello&who=world'

Если строка запроса отсутствует, url.search возвращает пустую строку (”):

const url1 = new URL('http://example.com/path/index.html')
const url2 = new URL('http://example.com/path/index.html?')

url1.search // ''
url2.search // ''

3.1. Разбор (парсинг) строки запроса

Вместо получения исходной строки запроса, мы можем получать ее параметры.

Легкий способ это сделать предоставляет свойство url.searchParams. Значением данного свойства является экземпляр интерфейса URLSeachParams.

Объект URLSearchParams предоставляет множество методов для работы с параметрами строки запроса (get(param), has(param) и т.д.).

Давайте рассмотрим пример:

const url = new Url(
    'http://example.com/path/index.html?message=hello&who=world'
)

url.searchParams.get('message') // 'hello'
url.searchParams.get('missing') // null

url.searchParams.get('message') возвращает значение параметра message строки запроса.

Доступ к несуществующему параметру url.searchParams.get('missing') возвращает null.

4. Название хоста (hostname)

Значением свойства url.hostname является название хоста URL:

const url = new URL('http://example.com/path/index.html')

url.hostname // 'example.com'

5. Путь (pathname)

Свойство url.pathname содержит путь URL:

const url = new URL('http://example.com/path/index.html?param=value')

url.pathname // '/path/index.html'

Если URL не имеет пути, url.pathname возвращает символ /:

const url = new URL('http://example.com/');

url.pathname; // '/'

6. Хеш (hash)

Наконец, хеш может быть получен через свойство url.hash:

const url = new URL('http://example.com/path/index.html#bottom')

url.hash // '#bottom'

Если хеш отсутствует, url.hash возвращает пустую строку (”):

const url = new URL('http://example.com/path/index.html')

url.hash // ''

7. Проверка (валидация) URL

При вызове конструктора new URL() не только создается экземпляр, но также осуществляется проверка переданного URL. Если URL не является валидным, выбрасывается TypeError.

Например, http ://example.com не валидный URL, поскольку после http имеется пробел.

Попробуем использовать этот URL:

try {
    const url = new URL('http ://example.com')
} catch (error) {
    error // TypeError, "Failed to construct URL: Invalid URL"
}

Поскольку 'http ://example.com' неправильный URL, как и ожидалось, new URL('http ://example.com') выбрасывает TypeError.

8. Работа с URL

Такие свойства, как search, hostname, pathname, hash доступны для записи.

Например, давайте изменим название хоста существующего URL с red.com на blue.io:

const url = new URL('http://red.com/path/index.html')

url.href // 'http://red.com/path/index.html'

url.hostname = 'blue.io'

url.href // 'http://blue.io/path/index.html'

Свойства origin, searchParams доступны только для чтения.

9. Заключение

Конструктор URL() является очень удобным способом разбора (парсинга) и проверки (валидации) URL в JavaScript.

new URL(relativeOrAbsolute, [, absoluteBase] в качестве первого параметра принимает абсолютный или относительный URL. Если первый параметр является относительным URL, вторым параметром должен быть абсолютный URL — основа для первого аргумента.

После создания экземпляра URL(), Вы можете получить доступ к основным компонентам URL:

• url.search — исходная строка запроса
• url.searchParams — экземпляр URLSearchParams для получения параметров строки запроса
• url.hostname — название хоста
• url.pathname — путь
• url.hash — значение хеша

I found the marked answer wasn’t sufficient for me. It states that getting the hash from the URL has huge security flaws but offers no real way of combatting it. There are ways out there of sanitizing the URL if you want to go that route, but if you’re simply trying to show() a container, or apply some CSS/classes to the hash-matching ID container, then there’s a much simpler way…

Introducing the :target selector.

The :target pseudo-class represents the unique element that has a matching id to the URL’s fragment, meaning you can apply JS to it by simply doing something like:

$(':target').show();

Or in my case, just un-hiding the element I want with CSS only:

:target {
    display: block;
}

I know the OP’s answer is almost exactly 13 years old, but this is a significantly easier and more secure way of achieving the same effect without dealing with getting the URL, splitting it up, sanitizing it – and hell, you can even avoid JS altogether with this method.

And yes, the :target selector is well-supported

This post will discuss how to get hash value from URL using JavaScript and Query.

1. Get hash value for any URL

With pure JavaScript, you can get hash value from a given using the indexOf() and substring(), as demonstrated below:

 
You can also use the split() method with the pop() method, as shown below:

2. Get hash value for the current URL

Alternatively, if you need a hash value for the current window URL, you can just use window.location.hash, which returns a string containing a '#', followed by the fragment identifier of the URL. If the URL does not have a fragment identifier, this returns an empty string, "".

 
With jQuery, you can use the .prop() on the location object to get the hash:

 
To extract only the fragment identifier of the URL without '#', you can use the substr() method like:

 
Here’s another solution using window.location.href.

That’s all about getting hash value from URL using JavaScript and Query.

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

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

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

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

<script>

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

document.write (urlObj . hash);

</script>

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

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

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

Если выше вы не получили и не увидели “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 и далее получить и вывести его.

Код:

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-а без решетки

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