We can collect all anchors in a publication HTML in one call to document.getElementsByTagName
. Then we can classify the anchors into three sets: references to the places in the same document, references to external resources, and all the rest.
I would reasonably assume that the anchors with the protocol file:
are internal to the article and reference its elements by their id
attributes, otherwise they make no sense. They should be tested: for each anchor, document
should find an appropriate HTML element using document.getElementById
referenced by such an anchor. If the element is null
, this is a broken link.
External references are simply collected and the HTML code with those anchors is created in the form of a list. When all of them are in one place, it’s easy to test them manually.
Here is how:
“validator.js”:
window.onload = () => {
const errors = [];
const external = [];
const anchors = document.getElementsByTagName("a");
for (let anchor of anchors) {
if (!anchor.textContent) continue;
if (!anchor.href) continue;
if (anchor.protocol == "file:") {
if (!anchor.hash) continue;
element = document.getElementById(anchor.hash.replace("#", ""));
if (!element)
errors.push(anchor);
} else
external.push(anchor);
}
if (errors.length > 0) {
document.writeln(
`<h1>Errors: invalid anchor hrefs:</h1>`);
for (let anchor of errors)
document.writeln(
`<h3> ${anchor.hash}<dd>Text:
"${anchor.textContent}"</dd></h3>`);
}
if (external.length > 0) {
document.writeln(`<h1>External anchors:</h1><ol>`);
for (let anchor of external)
document.writeln(
`<li><a href="${anchor.href}">
${anchor.textContent}</a></li>`);
document.writeln("</ol>");
}
}
To use it, temporarily add to your to your publication’s HTML file:
<script src="validator.js"></script>