Uncoder

[Nexus0100]

Buongiorno, sto realizzando una specie di framework che permetta la realizzazione di single page Application, più o meno come Angular, con la diversità che ha un componente particolare.
In ogni caso, sto realizzando un componente che dovrebbe andare a prendere il codice inserito all'interno di un elemento con classe .uncode e ne codifica il testo in modo che non venga interpretato dal DOM.
Più o meno ci sono, perché alla fine per fare ciò mi basta iterare tutti gli elementi della pagina e fare un:

this.innerText = this.innerHTML;

E il codice html diventando testo non viene interpretato, però questo va a creare conflitto con l'indentazione in quanto se faccio così:

<div class="uncode">
 <p>Testo non codificato in HTML</p>
</div>

Il testo viene appiccicato sul lato sinistro.
Se invece alla classe uncode aggiungo lo stile:

.uncode{
 white-space: pre;
}

Il testo assume l'indentazione che ha nel .html perciò se è dentro un paio di div il risultato è:
...............................<p>Testo non codificato in HTML</p>
A giro per la pagina

Esiste un modo jedi per rimetterlo in linea corretta?
Suppongo che il problema si debba trattare dalla parte JS
Grazie in anticipo

[KillerWorm]

Ciao

Esiste un modo jedi per rimetterlo in linea corretta?

Potrebbe esistere ma cosa intendi esattamente?
E' chiaro che con white-space: pre; vengano considerati tutti gli spazi presenti sul codice di origine. Tu cosa vorresti ottenere invece?
Vuoi che l'indentazione sia rielaborata automaticamente?

Il testo assume l'indentazione che ha nel .html perciò se è dentro un paio di div il risultato è:
...............................<p>Testo non codificato in HTML</p>

Ci saranno tutti quelli spazi ma nessuno ti impedisce di impostare l'indentazione come meglio preferisci al momento della stesura del codice. No?

[Nexus0100]

Sisi, alla fine ho risolto, quello che volevo ottenere io era questo:

.....<p>Ciao1</p>
.....<div class="uncode">
..........<h1>Ciao</h1>
.....</div>

Viene stampato come:
Ciao1
..........<h1>Ciao</h1>
Che a primo impatto potrrebbe anche andare bene ma l'effetto che desideravo era un indentazione automatica che mi riportasse il testo sulla sinistra indentato però.
Perciò tipo:
Ciao1
<h1>Ciao</h1>
Ma ho comunque risolto in un modo un po contorto
Per chi volesse sapere cosa ho fatto perché ha lo stesso problema ho fatto così:

var toTrim = undefined;
            var lines = v.innerHTML.split(/\r\n|\r|\n/);
            for(var j = 0; j < lines.length; j++){
                if(lines[j].trim().length > 0){
                    if((lines[j].length - lines[j].trim().length) > 0){    //Space calculation from the left edge to the first character.
                        if(toTrim == undefined){
                            toTrim = (lines[j].length - lines[j].trim().length);
                            lines[j] = lines[j].slice((lines[j].length - lines[j].trim().length), lines[j].length);
                        }
                        else
                            lines[j] = lines[j].slice(toTrim, lines[j].length);
                    }
                }
                else{
                    lines.splice(j, 1);
                    j--;
                }
            }
            v.innerText = lines.join("\n");

In questo modo prendo la prima linea la porto a sinistra e sottraggo gli stessi spazi a tutte le altre line seguenti.

(Perché alla fine volevo lasciare l'indentazione corretta e non dover mettere quell'<h1>... sulla sinistra del foglio .html che mi pareva assai disordinato)

[KillerWorm]

Ma ho comunque risolto in un modo un po contorto

Bene, l'importante è aver risolto in qualche modo.

Però il tuo sistema, oltre ad essere contorto, ha comunque qualche buco.
Nel caso i livelli di indentazione non siano correttamente impostati dall'inizio, è possibile che venga mangiato del testo.

Supponi di avere ad esempio una cosa del genere:

    <div class="uncode">
        <h1>Ciao</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Morbi venenatis nibh sit amet mi elementum semper.
      </p>
    </div>

dove la prima riga magari ha un'indentazione maggiore del previsto. Dato che il tuo sistema si basa sull'indentazione di questa prima riga, andrà a mangiare letteralmente i primi caratteri delle righe successive.
Certo c'è chiaramente un errore iniziale di stesura del codice HTML, che non dovrebbe esserci, però sai com'è...

Comunque sia, giusto per diletto, ho provato ad elaborare una soluzione un po' più elegante usando qualche regex:

var v = document.querySelector('.uncode');
        
v.innerText =  (v.innerHTML
  .replace(/(^\s*\n)|(\s*$)/g,'')                   // Trim sull'intero contenuto
  ).replace(new RegExp('^'
    +(v.innerHTML.match(/^[ \t]*(?=.)/m)||[''])[0]  // Estraggo il primo eccesso di indentazione
  ,'gm'),'')                                        // e lo elimino da ogni riga, dove possibile
;

Si basa sempre sull'indentazione della prima riga. Però, nel caso questa risultasse maggiore rispetto all'indentazione da eliminare sulle righe successive, tali righe manterranno la loro indentazione originale. Chiaramente non è una soluzione ideale, ma perlomeno non vengono mangiati i caratteri se dovesse esserci qualche irregolarità imprevista.

Mi sono poi divertito nel cercare un metodo un po' più completo.
Qui un esempio:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      div.uncode{
        background: #f5f5f5;
        border: 1px solid #aaa;
        margin: 10px 0;
      }
      .sourcemode{
        unicode-bidi: embed;
        font: normal 12px/1 monospace;
        white-space: pre;
        padding: 5px 0;
      }
    </style>
  </head>
  <body>
  
    <input id="btnUncode" type="button" value="Toggle Source Mode!">
    
    <div class="uncode">
      <h1>Prova</h1>
      <div>
        Lorem ipsum dolor sit amet,
        consectetur adipiscing elit.
      </div>
    </div>
    
    <div class="uncode">
        <h1>Altra prova (qui ho lasciato voluttamente un'indentazione maggiore)</h1>
      <ul>
        <li>Morbi</li>
        <li>venenatis</li>
        <li>nibh</li>
        <li>sit</li>
      </ul>
      
    </div>
    
    <script type="text/javascript">
      function Uncode(e){
        var l = document.querySelectorAll(e), i = l.length, d = [];
        while (i--) d[i] = new init(l[i]);
        function init(e){ this.defaultHtml = e.innerHTML; }
        this.toggle = function(b){
          var i = l.length, e, code, minIndent;
          while (i--){
            e = l[i];
            if(e.classList.toggle('sourcemode')) {
              code = e.innerHTML
                .replace(/(^\s*\n)|(\s*$)/g,'')   // Trim sull'intero contenuto
                .replace(/\t/g,'  ')              // Converto eventuali TAB in spazi per una questione di uniformità
              ;
              code = code.replace(new RegExp('^'
                +code.match(/^ *(?=.)/gm)         // Estraggo l'indentazione minore tra le varie righe...
                  .reduce(function(a,b){
                    return a.length>=b.length?b:a;
                  })
              ,'gm'),'')                          // ...quindi la utilizzo per eliminare l'eccesso da tutte le righe
              e.innerText = code;
            }else
              e.innerHTML = d[i].defaultHtml;
          }
        }
      };
      
      var uncodeElements = new Uncode('.uncode'); // Qui istanzio l'oggetto Uncode
      
      btnUncode.onclick = function(){
        uncodeElements.toggle();                  // Eseguo il toggle sull'oggetto
      }
      </script>
  </body>
</html>

Il sistema è basato su un oggetto principale che è possibile istanziare passando un semplice selettore per stabilire quali elementi devono essere processati. E' quindi possibile applicare la modalità codice sorgente e viceversa, utilizzando l'opportuno metodo toggle dell'oggetto. Nell'esempio ho utilizzato un pulsante che esegue il toggle su due elementi appartenenti ad una stessa istanza. Ma è possibile chiaramente avere differenti istanze controllabili separatamente.

Ho aggiunto inoltre un po' di css per presentare meglio il tutto.

In più, a differenza dell'altro sistema, questo si basa sull'indentazione minore tra tutte le righe esaminate; per cui andrà a riportare tutte le righe eliminando l'eccesso relativamente a quell'indentazione minore.

Chiaramente, per avere una soluzione ottimale, bisognerebbe sviluppare un sistema che applichi una indentazione programmaticamente in base alla reale struttura del codice esaminato. Di sicuro esistono già script o librerie che lo fanno, ma in tal caso andrebbero opportunamente integrati sul tuo elaborato.

Per il momento le mie sono giusto delle idee, poi vedi tu come meglio procedere per lo sviluppo del tuo sistema.

Buon proseguimento.