Formattare un codice HTML via script

Salve a tutti

è possibile formattare un testo html con qualche classe tipo beautifier per ottenere un codice ordinato?

Grazie

Ulisse

inviato 10 anni fa
ulisse
X 0 X

E fare una domanda un po meno criptica?

Cosa intendi per "formattato", scritto bene?

Devi barcamenarti tra le tabulazioni.

Oggi gli editor di testo sono molto evoluti, e anche quando scrivi una query che ti da testo html da inviare al client, puoi sempre pre o post formattarla in modo che il risultato sia soddisfacente per l'occhio umano.

Parlo di occhio umano perché il parser del client digerisce quasi tutto.

Prova a vedere i parametri delle istruzioni sprinf e fprinf danno testo formattato attraverso parametri stabiliti dal'utente.

risposto 10 anni fa
Marco Grazia
X 0 X

Ciao Marcolino,

per formattato intendo che il codice sia indentato correttamente ad esempio:

Prima:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Shine Builder 0.1: Customers</title>

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>

<script src="js/controls.js" type="text/javascript"></script>
<script src="js/validation.js" type="text/javascript"></script>
<script src="js/customers.js" type="text/javascript"></script>
<link href="css/default.css" rel="stylesheet" type="text/css">
</head>

<body>

    <div id="browser"><div></div></div>
    <div id="updown"><a name="top"></a><a href="javascript:void(0);" title="Pannello di Controllo" accesskey="1" onclick="Effect.toggle('browser','slide'); return false;"><img width="125" height="23" src="images/updown.gif" border="0" title="Pannello di Controllo" alt="Pannello di Controllo" /></a></div>

    <div style="width:100%; height:500px">

      <div class="FormContent">
      [<a href="#" onclick="return prevRecord()"><<</a>   <a href="#" onclick="return nextRecord()">>></a>]
      <fieldset>
          <legend>Customers</legend>
          <form id="" action="" method="post">
<div class="form-row"><div class="field-label"><label class="FormLabel" for="field1">Code Customers</label></div>

<div class="field-widget"><input class="FormInputDisabled" size="1" readonly="yes" id="fld_idcustomers" type="text"><br>

</div></div><div class="form-row"><div class="field-label"><label class="FormLabel" for="field1">Name</label></div>
<div class="field-widget"><input class="required" size="12" id="fld_name" type="text"><br>

</div></div><div class="form-row"><div class="field-label"><label class="FormLabel" for="field1">Surname</label></div>
<div class="field-widget"><input class="required" size="8" id="fld_surname" type="text"><br>

</div></div><div class="form-row"><div class="field-label"><label class="FormLabel" for="field1">City</label></div>
<div class="field-widget"><input class="required" size="7" id="fld_city" type="text"><br>

</div></div><div class="form-row"><div class="field-label"><label class="FormLabel" for="field1">Extcode Giornalista</label></div>
<div class="field-widget"><input class="required" size="5" autocomplete="off" name="fld_ik_idgiornalista" readonly="yes" onclick="showbrowser('fld_ik_idgiornalista', 'tbl_giornalista', 0, '');" id="fld_ik_idgiornalista" type="text"><img onclick="Effect.toggle('browser','slide'); return false;" align="top" src="images/selector.gif">  <input class="hiddentextbox" type="text" id="fld_ik_idgiornalista_value" value=""><br>

</div></div><div class="form-row"><div class="field-label"><label class="FormLabel" for="field1">Notes</label></div>
<div class="field-widget"><textarea class="" cols="40" rows="10" id="fld_notes" type="textarea"></textarea><br>

</div></div><input type="submit" value="Submit"></form>

          <div id="toolbar"></div>
      </fieldset>
      </div>
    </div>


</body>

</html>

Dopo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
   <title>Shine Builder 0.1: Customers</title>
   <script src="js/prototype.js" type="text/javascript"></script>
   <script src="js/scriptaculous.js" type="text/javascript"></script>
   <script src="js/controls.js" type="text/javascript"></script>
   <script src="js/validation.js" type="text/javascript"></script>
   <script src="js/customers.js" type="text/javascript"></script>
   <link href="css/default.css" rel="stylesheet" type="text/css">
</head>

<body>
   
   <div id="browser">
      <div></div>
   </div>
   <div id="updown">
      <a name="top"></a><a href="javascript:void(0);" title="Pannello di Controllo" accesskey="1" onclick="Effect.toggle('browser','slide'); return false;"><img width="125" height="23" src="images/updown.gif" border="0" title="Pannello di Controllo" alt="Pannello di Controllo" /></a>
   </div>
   <div style="width:100%; height:500px"><div class="FormContent">[<a href="#" onclick="return prevRecord()">&lt;&lt;</a> <a href="#" onclick="return nextRecord()">&gt;&gt;</a>] 
      <fieldset>
         <legend>Customers</legend>
         <form id action method="post">
         
            <div class="form-row">
               <div class="field-label"><label class="FormLabel" for="field1">Code Customers</label></div>
               <div class="field-widget"><input class="FormInputDisabled" size="1" readonly="yes" id="fld_idcustomers" type="text"><br></div>
            </div>
            <div class="form-row">
               <div class="field-label"><label class="FormLabel" for="field1">Name</label></div>
               <div class="field-widget"><input class="required" size="12" id="fld_name" type="text"><br></div>
            </div>
            <div class="form-row">
               <div class="field-label"><label class="FormLabel" for="field1">Surname</label></div>
               <div class="field-widget"><input class="required" size="8" id="fld_surname" type="text"><br></div>
            </div>
            <div class="form-row">
               <div class="field-label"><label class="FormLabel" for="field1">City</label></div>
               <div class="field-widget"><input class="required" size="7" id="fld_city" type="text"><br></div>
            </div>
            <div class="form-row">
               <div class="field-label"><label class="FormLabel" for="field1">Extcode Giornalista</label></div>
               <div class="field-widget"><input class="required" size="5" autocomplete="off" name="fld_ik_idgiornalista" readonly="yes" onclick="showbrowser('fld_ik_idgiornalista', 'tbl_giornalista', 0, '');" id="fld_ik_idgiornalista" type="text"><img onclick="Effect.toggle('browser','slide'); return false;" align="top" src="images/selector.gif"><input class="hiddentextbox" type="text" id="fld_ik_idgiornalista_value" value><br></div>
            </div>
            <div class="form-row">
               <div class="field-label"><label class="FormLabel" for="field1">Notes</label></div>
               <div class="field-widget"><textarea class cols="40" rows="10" id="fld_notes" type="textarea"></textarea><br></div>
            </div>
            <input type="submit" value="Submit"></form>
         
            <div id="toolbar"></div>
         </fieldset> 
      </div>
   </div>
</body>

</html>

ti segnalo un sito internet che esegue proprio quello che cerco: http://formatter.gerbenvv.nl/version3/index.php?lang=en&look=blue_red

Grazie

Ulisse  :bye:

risposto 10 anni fa
ulisse
modificato 10 anni fa
X 0 X

Sì ma per cosa ti serve?

Un programma del genere te lo puoi anche fare, devi stabilire delle regole, per esempio nel codice che hai inserito prima, puoi definire che quando trovi i tag <html>, <head> e <body> non aggiungere davanti nessuna tabulazione.

Mentre per tutti gli altri "elementi di blocco" sì. Tenendo però presente che quando trovi un elemento di chiusura, ad esempio </div> devi togliere un carattere di tabulazione.

In pratica devi realizzare una specie di pretty printer.

risposto 10 anni fa
Marco Grazia
X 0 X

Non c'è una classe già fatta da qualche parte?

 :-\

risposto 10 anni fa
ulisse
X 0 X
Effettua l'accesso o registrati per rispondere a questa domanda