Как посмотреть список якорей на странице?

Question

[Андрей Акимов]

Читаю документацию одного проекта, которая представлена в виде "длинных" HTML страниц. Оглавления у страниц нет, но по тексту присутствуют заголовки с прикреплёнными к ним "якорями". Используя браузеры Firefox и Chrome не нашел функции позволяющей собрать и представить в виде списка - ссылки на все якоря в документе, т.е. сформировать оглавление "на лету". Среди расширений/дополнений для указанных браузеров также не нашел ничего подходящего.
Очень утомительно искать ответ в "простыне" документации, было бы удобнее переходить из динамически составленного списка ссылок (якорей) к нужному разделу. Если кто знает нужное расширение/дополнение - прошу поделиться информацией.

Answer 1

[Stalker_RED]

UPD:

let links = '<ul>'
let counter = 0
document.querySelectorAll('a[name]').forEach(el => links += `<li><a href="#${el.name}">${counter++}</a></li>`)
document.querySelectorAll('[id]').forEach(el => links += `<li><a href="#${el.id}">${counter++}</a></li>`)
document.body.insertAdjacentHTML('afterbegin', links + '</ul>')

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

Comments

[Андрей Акимов]

Ты не понял мой вопрос. Как эта строка кода мне поможет?

[Андрей Акимов]

Stalker_RED, Я не веб-программист. Я пользователь! Мне нужно просто удобное средство для навигации по странице в процессе чтения.

[Stalker_RED]

Андрей Акимов, я не думаю, что вы найдете готовое универсальное решение. Мне кажется, что реализация такой штуки на грани возможного. Но конкретно под вашу документацию скорее всего можно подобрать.

[Андрей Акимов]

Вот пример: git-config. При установки Git на ПК можно найти эту страницу документации (и многие другие) в виде HTML страницы. О создании Оглавления составители документации не подумали.

[Stalker_RED]

let links = '<ul id="foo">'
document.querySelectorAll('h2[id]').forEach(el => links += `<li><a href="#${el.id}">${el.textContent}</a></li>`)
document.body.insertAdjacentHTML('afterbegin', links + '</ul>')
document.head.insertAdjacentHTML('afterbegin', '<style>#foo li {display: inline-block; margin: 0 .5em;}</style>')

Выглядит как-то так:


Но я изменил правило на h2[id], иначе получалось овер 500 ссылок. Универсальное решение сложно составить.

[Андрей Акимов]

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

[Stalker_RED]

f12 → консоль.

Можно расширение сделать, или в Greasemonkey/Tampermonkey использовать.

[Андрей Акимов]

Работает! Ещё бы такое расширение/дополнение найти, если оно есть...

[Stalker_RED]

Андрей Акимов, Greasemonkey/Tampermonkey