xPathTrainer/src/xpathTrainer.ts

const initialise = () =>
{
    try
    {
        const myFile=document.getElementById("myFile") as HTMLInputElement;
        const myXPath=document.getElementById("myXPath") as HTMLInputElement;
        const testButton=document.getElementById("runTest") as HTMLButtonElement;
        const myIframe=document.getElementById("display") as HTMLIFrameElement;
        const divResult=document.getElementById("result") as HTMLDivElement;

        myXPath.disabled=true;
        testButton.disabled=true;
        myXPath.placeholder="Commencer pour sélectionner un fichier";
        myIframe.style.display="none";

        const xpath=require('xpath');
        const dom=require('@xmldom/xmldom').DOMParser;

        myFile.addEventListener("change", function(e)
        {
            // L'utilisateur a-t-il vraiment sélectionné un  fichier ?
            // Si oui, est-ce un fichier XML ?
            const selectedFiles=myFile.files;
            if(selectedFiles !== null && selectedFiles.length === 1)
            {
                // selectedFiles[0].type ne fonctionne pas avec certains navigateurs (Fennec), donc... :
                const extension=selectedFiles[0].name.substring(selectedFiles[0].name.lastIndexOf(".")+1);
                if(extension !== "xml")
                    divResult.innerHTML=`<p>Le fichier que vous avez sélectionné ne semble pas être un fichier XML.</p>`;
                else
                {
                    // Création d'un fichier XML temporaire que l'on va charger dans l'iframe :
                    const reader=new FileReader();
                    reader.onload=async function(e)
                    {
                        const xmlDatas=reader.result as string;
                        const xmlTmp=new Blob([xmlDatas], {
                            type: "application/xml",
                        });
                        const iframeURL=URL.createObjectURL(xmlTmp);
                        myIframe.src=iframeURL;
                        myIframe.style.display="block";
                        myXPath.disabled=false;
                        testButton.disabled=false;
                        myXPath.placeholder="Saisir l'XPath à tester";
                        
                        // Et on peut commencer à jouer  avec !
                        const doc=new dom().parseFromString(xmlDatas, 'text/xml');
                        testButton.addEventListener("click", (e) =>
                        {
                            let xPathTested=myXPath.value.trim();
                            if(xPathTested == "")
                                divResult.innerHTML=`<p>XPath vide !</p>`;
                            else
                            {
                                const nodes=xpath.select(xPathTested , doc);
                                let resultTxt="<ul>";
                                for(let i = 0; i < nodes.length; i++)
                                    resultTxt+="<li>"+nodes[i].toString()+"</li>";
                                resultTxt+="</ul>";
                                divResult.innerHTML=resultTxt;
                            }
                        });
                    };
                    reader.readAsText(selectedFiles[0]);           
                }
            }
        });
    }
    catch(e)
    {
        console.error(e);
        document.getElementById("result")!.innerHTML=`<p>Désolé, mais un problème technique empêche le fonctionnement normal de cette page.</p>`;
    }
}
console.log("Hello, les dev !\nLe code source TypeScript utilisé pour faire fonctionner cette page est lisible ici : :\nhttps://forge.chapril.org/Fab_Blab/xPathTrainer/src/branch/master/src/xpathTrainer.ts");
initialise();