Trasforma una stringa

 

Finale

 

Temporaneo

 

 

 

trasf.html

 

 1 <!DOCTYPE>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>Trasforma</title>
 6 <link rel="icon" href="https://www.cersil.it/jv/favicon.ico">
 7 <link href="../../css/pag.css" rel="stylesheet" type="text/css" />
 8 <link href="../../css/codice.css" rel="stylesheet" type="text/css" />   
 9 </head>
10 <body>
11 <p class="corpobold">Finale</p>
12 <p class="corpo"><input type="text" id="finale" style="width: 600px;">/p>
13 <p class="corpo">&nbsp;</p>
14 <p class="corpobold">Temporaneo</p>
15 <p class="corpo"><input type="text" id="temp" style="width: 600px;"></p>
16 <p class="corpo">&nbsp;</p>
17 <button onclick="trasforma()">Trasforma</button>
18 <input type="file" id="fileInput" style="display: none";>
19 <button onclick="openFileExplorer()">Sfoglia...</button>
20 
21 <script>
22 function trasforma() {
23     const inputString = document.getElementById('temp').value;
24     const regex = /^.*Cersil-localTest\\?(.*)$/;
25     const result = inputString.replace(regex, '$1').replace(/\\/g, '/');
26     document.getElementById('finale').value = result;
27 }
28         
29 function openFileExplorer() {
30     // Simula un clic sull'input di tipo file
31     document.getElementById('fileInput').click();
32 }
33 </script>
34 </body>
35 </html>

 

Descrizione:

Ci sono due imputTest uno "Finale" e l'altro "Temporaneo" un bottone Sfoglia ed uno Trasforma ed un imput type file che però è nascosto.

Procedura:

  1. Clicchiano su Sfoglia si apre esplora risorse, si scglie un file si copia il percorso e si esce.
  2. Si incolla il percorso dentro Temporaneo, si aggiunge il nome del file.
  3. Si fa clic su Trasforma e per incanto nella casella di testo Finale compare il percorso trasformato.

Ad esempio il contenuto di Temporaneo potrebbe essere:

D:\Archivio\SITI\MySiti\Cersil-Javascript\pagine\trasforma\trasf.html

Ma a noi serve solo: pagine\trasforma\trasf.html anzi ci serve con le slash invece delle backslash cosi: pagine/trasforma/trasf.html

 

Ora andiamo ha commentare le regular expression:

 

D:\Archivio\SITI\MySiti\Cersil-Javascript\pagine\trasforma\trasf.html

  1. const inputString = document.getElementById('temp').value;
  2. const inputRegx = document.getElementById('split').value;
  3. const inputDollar = document.getElementById('dollar').value;
  4. const regex = new RegExp(inputRegx);
  5. const result = inputString.replace(regex, inputDollar).replace(/\\/g, '/');
  6. document.getElementById('finale').value = result;

Le prime tre linee raccolgono il contenuto degli inputTest.

la 4 crea l'ogetto regex

la 5 sovrascrive la striga con il risultato con il metodo replace fornendogli sia la regex che le $ la input dollar che in questo caso sarà $1. Poi fa un ulteriore replace sostituendo l \ con le / mediante la regola:

 

stringa.replace(/\\/g, '/') che vuol dire:

 

  1. / all'inizio e alla fine sono i delimitatori della reolar in javascript
  2. \\ significa il carattere \
  3. g è ilqualificatore globale che fa raccogliere tutte le ricorrenze e non solo la prima dopo la virgola è il secondo argomento di replace che indica il carattere con cui verranno sostituite

Cosa fa questa regex ^(?:.*?\\){5}(.*)

  • ^ dll'inizio
  • (...) le parentesi delimitano un gruppo. Ogni gruppo può essere catturato
  • ? da solo significa: Si verifica nessuna o una volta, ? è l'abbreviazione di {0,1}.
  • *? quando segue un qualificatore fa sì che l'espressione regolare si fermi alla prima corrispondenza. Quindi
  • .*?\\ significa: 0 o più di qualsiasi carattere ma una sola corrispondenza
  • (?: ... ) crea un gruppo di non cattura, il che significa che la regex non restituirà l'output di questo gruppo separatamente. Viene utilizzato qui per raggruppare il .*?\\ senza creare un gruppo di cattura separato, poiché vogliamo catturare solo il testo dopo il quinto backslash. In pratica per eseguire 5 volte {5} quello che è tra parentesi (.*?\\) cioè (.*?\\){5} avremmo poi cinque gruppi e poi seguirà l'ultimo: (.*) l'unico che ci interessa. Scrivendo così: (?:.*?\\){5} cioè aggiungendo ?: facciamo in modo ch i 5 gruppi non vengano rilevati l'unico gruppo sarà:(.*) l'ultimo. Potrem cosi esrarlo con un $1 altrimenti dovevamo utilizzare $6.
  • ?: è un unico qualificatore, se volessi utilizzare i . cocme letterale dovrei scrivere: ?\:
  • se uasassi: ^(.*\\).*$ otterrei tutto fini all'ultima occorrenza di \
  • se invece volessi catturare qeullo che c'è prima della prima occorrenza di \ allora dovrei scrivere: ^(.*?\\)
  • se volessi catturare quello che c'è tra la prima e la seconda occrrenza di \ scriverò: ^(.*?\\)(.*?\\). naturalmente per estrarre la stringa dovrei utilizzare $2
  • Se volessi estrarre tutto quello che cìè dopo la quinta occorrenza di \ potrei fare: ^(.*?\\)(.*?\\)(.*?\\)(.*?\\)(.*?\\)(.)$ oppure annullando il ritorno dei gruppicon ?: cioè: ^(?:.*?\\){5}(.*) rimarrà solo l'ultimo

 

Perchè ci serve questa parte della stringa?

Bisogna fare una premessa:

Normalmente quando si scrive del codice html o php si ha a disposizione una piattaforma locale ed una remota:

La piattaforma locale consta:

di una cartella dove risiedono tutti i file del sito che si stà realizzando ad es: D:\Siti\Mieisiti\lt\,

poi si ha un server di prova, un server MySql con linguaggio php, sempre sul nostro PC ad es. C:\xampp\htdocs\lt questo simula un server remoto ma risiede sul nostro Pc questo per comodità per testare il codice prima di postarlo sul server remoto.

La piattaforma remota consta:

Di un server e relativo database Mysql e linguaggio Php che invece risiedono in remoto presso un provider a cui si accede tramite link es. https://www.cersil.it/lt/

Ora immagginiamo di aver scritto una pagina dove ho la necessità di avere un percorso relativo ad es. ho un file nella cartella D:\Siti\Mieisiti\lt\ a cui voglio accedere e che ha questa path: D:\Siti\Mieisiti\lt\Agronomia\Biologia\file.html e questa è la path che potremo copiare da esplora risorse. Ma se volessimo accedere a questo file dovremo scrivere nel browser per il server locale: http://localhost/lt/Agronomia\Biologia\file.html. E se volessimo creare un hotspot su di una pagina dovremo dare solo il percorso interno ossia: Agronomia\Biologia\file.html ecco perchè abbiamo bisogno di queta parte del path.