A
A
Andrey Akimov2018-02-10 18:53:16
Browsers
Andrey Akimov, 2018-02-10 18:53:16

How to see the list of anchors on a page?

I'm reading the documentation of one project, which is presented in the form of "long" HTML pages. The pages do not have a table of contents, but the text contains headings with "anchors" attached to them. Using the Firefox and Chrome browsers, I did not find a function that allows you to collect and present in the form of a list - links to all anchors in the document, i.e. generate a table of contents on the fly. Among the extensions / add-ons for the specified browsers, I also did not find anything suitable.
It is very tedious to look for the answer in the "sheet" of the documentation, it would be more convenient to move from a dynamically compiled list of links (anchors) to the desired section. If anyone knows the right extension / addition - please share the information.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Stalker_RED, 2018-02-10
@Ostan

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>')

Of course, among these links there may be a lot of garbage. Perhaps it is worth thinking about the normal names of these links, but without knowing the markup, I see no reason to mess around.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question