Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML5

Please Validate Your Publications

0.00/5 (No votes)
26 Sep 2023CPOL 4.5K  
The usual problem with publications is broken links. I suggest using a simple script to detect and fix problems.

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”:

JavaScript
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);
    } //loop

    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

    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>");
    } //if

}

To use it, temporarily add to your to your publication’s HTML file:

HTML
<script src="validator.js"></script>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)