jQuery: trasformare il testo preformattato in una lista

  • jQuery
  • Gabriele Romanato

Possiamo trasformare il testo preformattato contenuto all'interno di un elemento pre in una lista utilizzando le espressioni regolari JavaScript ed il metodo html() di jQuery. La nostra soluzione funzionerà in tutti quei browser in cui una nuova riga viene rappresentata dal carattere \n. Per Internet Explorer (8 ed inferiori) bisogna tener presente che verrà utilizzata la sequenza \r\n.

Abbiamo la seguente marcatura d'esempio:


<pre class="css">
body {
  color: #000;
}
</pre>

<pre class="css">
a {
  color: blue;
  text-decoration: none;
  outline-style: none;
}
</pre>

che vogliamo trasformare in due liste ordinate con i seguenti stili CSS:


ol.css {
	background: #eee;
	border: 1px solid #999;
	padding: 0.3em;
	width: 50%;
	line-height: 1.4;
	font: 0.85em Monaco, "Courier New", Courier, monospace;
	margin-left: 2.5em;
	border-radius: 6px;
}


ol.css .indent {padding-left: 1em;}

Con jQuery la prima cosa da fare è sostituire l'elemento pre con un elemento ol avente la classe css:


$('pre.css').each(function() {
    
        var $html = $(this).html();
	
        $(this).replaceWith('<ol class="css">' + $html + '</ol>');
	
	
});

Quindi dobbiamo suddividere il contenuto HTML degli elementi in righe da trasformare in elementi li. Se le righe non contengono parentesi graffe di apertura o chiusura (come nell'apertura e chiusura delle regole CSS), possiamo applicare loro la classe indent:


$('ol.css').each(function() {
    
       var items = [];
        var oldHTML = $(this).html();
	
        var lines = oldHTML.split(/\r\n|\n/);
       
       
	
        for(var i=0; i<lines.length; i++) {
	
	var item;
	
	if(lines[i].indexOf('{') != -1 || lines[i].indexOf('}') != -1) {
	
	    item = '<li>'+lines[i]+'</li>';
	    
	} else {
	
	    item = '<li class="indent">' + lines[i] + '</li>';
	    
	}
	
	items.push(item);
	
	
        }
	
        for(var j=0; j<items.length; j++) {
	
	
	if(items[j] == '<li></li>' || items[j] == '<li class="indent"></li>') {
	
	    items.pop(items[j]);
	    
	}
	
        }
	

        var newHTML = items.join('');
	
         $(this).html(newHTML);
    
    
    });

L'array di righe viene infine riunito in un'unica stringa HTML che costituirà il contenuto della lista ordinata. Potete visionare l'esempio finale in questa pagina.

Torna su