Script javascript: Preview di testo digitato in textarea

difficoltà:

Demo
Download
Script simili
6/11/2006

Questo script permette di vedere in tempo reale durante la digitazione in una textarea la preview del testo digitato in un div tenendo la formattazione del testo che verrà visualizzato nel sito. Lo script a ogni pressione di un tasto all'interno della textarea copia il contenuto del testo all'interno del div sottostante. Lo script base, quello scritto sotto, permette anche l'inserimento di tag html e quindi la visualizzazione di link, bold, etc.

<style>
	textarea{font-family:verdana, arial; font-size:10px; width:300px; height: 100px;}
	#preview{font-family:verdana, arial; font-size:10px; width:300px; height: 100px; border:1px solid #000000; background-color:#cccccc; color:#8F3E3E; overflow:auto;}
</style>
<script>
function showpreview(){
	contenuto_testo=document.getElementById("testo").value;
	// trasformo a capo in <br/>
	contenuto_testo=contenuto_testo.replace(/\n/g,"<br/>");
	document.getElementById("preview").innerHTML=contenuto_testo;
}
</script>

<textarea id="testo" onkeyup="showpreview()"></textarea>
<br/>Preview:<br/>
<div id="preview"></div>

Se vogliamo impedire l'uso di codice html possiamo usare la funzione htmlEntities adattada a javascript di Dieter Raber nella sua libreria javascript. Otterremo dunque:

<style>
	textarea{font-family:verdana, arial; font-size:10px; width:300px; height: 100px;}
	#preview{font-family:verdana, arial; font-size:10px; width:300px; height: 100px; border:1px solid #000000; background-color:#cccccc; color:#8F3E3E; overflow:auto;}
</style>

<script>
// inizio htmlEntities -> http://www.dieterraber.net/jsStringFuncs.htm
String.prototype.htmlEntities = function()
{
  var chars = new Array ('&','à','á','â','ã','ä','å','æ','ç','è','é',
                         'ê','ë','ì','í','î','ï','ð','ñ','ò','ó','ô',
                         'õ','ö','ø','ù','ú','û','ü','ý','þ','ÿ','À',
                         'Á','Â','Ã','Ä','Å','Æ','Ç','È','É','Ê','Ë',
                         'Ì','Í','Î','Ï','Ð','Ñ','Ò','Ó','Ô','Õ','Ö',
                         'Ø','Ù','Ú','Û','Ü','Ý','Þ','€','\"','ß','<',
                         '>','¢','£','¤','¥','¦','§','¨','©','ª','«',
                         '¬','','®','¯','°','±','²','³','´','µ','¶',
                         '·','¸','¹','º','»','¼','½','¾');

  var entities = new Array ('amp','agrave','aacute','acirc','atilde','auml','aring',
                            'aelig','ccedil','egrave','eacute','ecirc','euml','igrave',
                            'iacute','icirc','iuml','eth','ntilde','ograve','oacute',
                            'ocirc','otilde','ouml','oslash','ugrave','uacute','ucirc',
                            'uuml','yacute','thorn','yuml','Agrave','Aacute','Acirc',
                            'Atilde','Auml','Aring','AElig','Ccedil','Egrave','Eacute',
                            'Ecirc','Euml','Igrave','Iacute','Icirc','Iuml','ETH','Ntilde',
                            'Ograve','Oacute','Ocirc','Otilde','Ouml','Oslash','Ugrave',
                            'Uacute','Ucirc','Uuml','Yacute','THORN','euro','quot','szlig',
                            'lt','gt','cent','pound','curren','yen','brvbar','sect','uml',
                            'copy','ordf','laquo','not','shy','reg','macr','deg','plusmn',
                            'sup2','sup3','acute','micro','para','middot','cedil','sup1',
                            'ordm','raquo','frac14','frac12','frac34');

  newString = this;
  for (var i = 0; i < chars.length; i++)
  {
    myRegExp = new RegExp();
    myRegExp.compile(chars[i],'g')
    newString = newString.replace (myRegExp, '&' + entities[i] + ';');
  }
  return newString;
}
// fine htmlEntities -> http://www.dieterraber.net/jsStringFuncs.htm
function showpreview(){
	contenuto_testo=document.getElementById("testo").value;
	// trasformo caratteri in htmlEntities
	// se si vuol mantenere inserimento HTML commentare la riga
	contenuto_testo=contenuto_testo.htmlEntities();
	// trasformo a capo in <br/>
	contenuto_testo=contenuto_testo.replace(/\n/g,"<br/>");
	document.getElementById("preview").innerHTML=contenuto_testo;
}
</script>

<textarea id="testo" onkeyup="showpreview()"></textarea>
<br/>Preview:<br/>
<div id="preview"></div>