Click here to Skip to main content
15,887,027 members
Articles / Web Development / HTML5
Tip/Trick

Please Validate Your Publications

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
26 Sep 2023CPOL 4.3K  
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)


Written By
Architect
United States United States
Physics, physical and quantum optics, mathematics, computer science, control systems for manufacturing, diagnostics, testing, and research, theory of music, musical instruments… Contact me: https://www.SAKryukov.org

Comments and Discussions

 
-- There are no messages in this forum --