Inserire in un div il risultato di una funzione ma senza cambiare formattazione

cavaliere123 · 19 Set 2012

Buonasera, sto iniziando uno script che mi crei in automatico i valori di un array e dove devo inserire un testo formattato secondo i codici caratteri empity..
Ho la funzione vista in altra discussione :

HTML:

<html>

<head>


<script language="Javascript">

function rimpiazza() { 
var miaStringa = document.mioform.testo.value;

miaStringa = miaStringa.replace(/\n/g, "<br/>");
miaStringa = miaStringa.replace(/'/g, "&acute");
miaStringa = miaStringa.replace(/¡/g, "&iexcl");
miaStringa = miaStringa.replace(/¢/g, "&cent");
miaStringa = miaStringa.replace(/£/g, "&pound");
--------------------------

document.mioform.risultato.value=miaStringa;

}
</script>

</head>

<body >
<form name="mioform">
<textarea name="testo" cols="35" rows="15"></textarea><br><br>
<textarea name="risultato" cols="35" rows="15"></textarea><br><br>
<input type="button" value="Clicca" onclick="rimpiazza()"> <input type="reset" value="Cancella">
</form>

</body>

</html>

Desidero inserire la stringa formattata in un elemento Dom del tipo

HTML:

document.getElementById("scritta").innerHTML = miaStringa;

da poter dopo richiamare in una tabella dinamica

Ma se per prova inserisco in un div , cioè :

HTML:

<div id="scritta"></div>

mi esce la scritta in html, cioè per maggiore chiarezza se metto la frase :
"Ciao
è da parecchio
che non ti vedo"

nel div non mi esce scritto :

" Ciao <br/>&egrave da parecchio <br/>che non ti vedo"

ma me lo riporta come sopra chiaramente, come posso evitare ciò ??

Avrei altre domande da fare ma per non appesantire cercherò di farle in modo da avere risposte brevi senza dover perder tempo... Vi ringrazio tutti. Domenico

cavaliere123 · 20 Set 2012

Wow questo l'ho risolto da solo

ho fatto cosi :

HTML:

<html>

<head>


<script language="Javascript">

function rimpiazza() { 
var miaStringa = document.mioform.testo.value;

miaStringa = miaStringa.replace(/\n/g, "<br/>");
miaStringa = miaStringa.replace(/'/g, "&acute");
miaStringa = miaStringa.replace(/¡/g, "&iexcl");
miaStringa = miaStringa.replace(/¢/g, "&cent");
miaStringa = miaStringa.replace(/£/g, "&pound");
--------------------------

document.mioform.risultato.value=miaStringa;
document.getElementById("scritta").innerText = miaStringa;


}
</script>

</head>

<body >
<form name="mioform">
<textarea name="testo" cols="35" rows="15"></textarea><br><br>
<textarea name="risultato" cols="35" rows="15"></textarea><br><br>
<input type="button" value="Clicca" onclick="rimpiazza()"> <input type="reset" value="Cancella">
</form>

<div id="scritta"></div>
</body>

</html>

Vale2 · 20 Set 2012

Ciao,

innerText funziona solo con MSIE andava bene come scritto prima con innerHTML

per visualizzare il testo inserito in un tag <div devi aggiungere un controllo sullo spazio vuoto inserito, mi spiego meglio se scrivi una frase ES:

Codice:

Valeria          Ciao

10 spazi fra Valeria e Ciao nel div vedrai solo Valeria Ciao

devi aggiungere un controllo sullo spazio in modo che aggiunga un  

il controllo dello spazio, barra spaziatrice premuta si fa con \s (sono controlli che fanno parte delle RegExp come \n

per correttezza oltre a \n si deve usare \r per avere piena compatibilità

Codice:

miaStringa = miaStringa.replace(/(\r\n|\n|\r)/g, "<br/>");

per lo spazio \s

Codice:

miaStringa = miaStringa.replace(/\s/g, "&nbsp;");

Valeria.

cavaliere123 · 20 Set 2012

Buongiorno Valeria, perdonami ma il primo problema non sono gli spazi anche se utilissimo da imparare la nuova procedura , ma il fatto che nel div mi compare il testo html cioè :

"Ciao
è da parecchio
che non ti vedo"

ma io voglio invece che scriva :

" Ciao <br/>&egrave da parecchio <br/>che non ti vedo",

altrimenti non posso copiarlo e metterlo in un array di frasi... non so se riesco ad essere chiaro.

Vale2 · 20 Set 2012

Ciao,

ti scrive &egrave perché non c'è sono il ; di chiusura è

Valeria.

cavaliere123 · 20 Set 2012

Perdonami Valeria , sono io che non riesco ad essere chiaro....

allora inizio da capo, te proprio mi hai scritto il codice che funziona benissimo con i form e te lo riposto :

HTML:

<html>

<head>


<script language="Javascript">

function rimpiazza() { 
var miaStringa = document.mioform.testo.value;

miaStringa = miaStringa.replace(/'/g, "&acute;");
miaStringa = miaStringa.replace(/¡/g, "&iexcl;");
miaStringa = miaStringa.replace(/¢/g, "&cent;");
-----------

document.mioform.risultato.value=miaStringa;

}
</script>

</head>

<body >
<form name="mioform">
<textarea name="testo" cols="35" rows="15"></textarea><br><br>
<textarea name="risultato" cols="35" rows="15"></textarea><br><br>
<input type="button" value="Clicca" onclick="rimpiazza()"> <input type="reset" value="Cancella">
</form>

</body>

</html>

adesso io desidero che invece di comparirmi nel secondo form : "risultato"
mi compaia in una cella di una tabella dinamica e ho fatto questo :

HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TABELLA DINAMICA</title>
<style>
table.tabella{
	border: 2px solid #CCCCCC;
}
table.tabella th{
	background-color : blue;
	font-size : 16px;
	color : white;
	padding : 2px;
}
table.tabella td{
	background-color : cyan;
	color : back;
	padding : 2px;
}
</style>

<script type='text/javascript'>

function rimpiazza(miaStringa) { 
var miaStringa = document.mioform.testo.value;


miaStringa = miaStringa.replace(/(\r\n|\n|\r)/g, "<br/>;");
miaStringa = miaStringa.replace(/'/g, "&acute;");
-------
 
document.mioform.risultato.value=miaStringa;

document.getElementById("scritta").innertext= miaStringa;

}


// Creo la tabella

function aggiungiRiga(id_table){
	var table = document.getElementById(id_table);
	var tbody = table.getElementsByTagName('tbody')[0];
	var colonne = table.getElementsByTagName('th').length;	
	var tr = document.createElement('tr');
          tbody.appendChild(tr);


		var td = document.createElement('td');
		var tx = document.createTextNode(xxxxxxx);
		td.appendChild(tx);
		tr.appendChild(td);
                  
               		var td = document.createElement('td');
		var tx = document.createTextNode("altro testo");
		td.appendChild(tx);
		tr.appendChild(td);

	
	
}
</script>

</head>

<body>

<form name="mioform">
<textarea name="testo" cols="35" rows="15"></textarea><br><br>
<textarea name="risultato" cols="35" rows="15"></textarea><br><br>
<input type="button" value="Clicca" onclick="rimpiazza()"> <input type="reset" value="Cancella">
</form>

<div id="scritta"></div>



	<table border='2' id='my_table' class='tabella' cellspacing='0' cellpadding='0'>
	<thead><tr><th>INTESTAZIONE COLONNA 1</th><th>INTESTAZIONE COLONNA 2</th></tr></thead>
	<tbody>
	
	</tbody>
	</table><br/>
	<input type='button' value='Aggiungi riga' onClick="aggiungiRiga('my_table')" />
    
    <br/><br/>
    <a href='http://www.donatantonio.net/blog/guide_tutorial/javascript/aggiungere-righe-a-tabella-in-maniera-dinamica/'>Torna all'articolo su www.donatantonio.net</a>
    <br/><br/>
    
</body>

</html>

Sono due i miei problemi...
Il primo che se metto :

HTML:

 document.getElementById("scritta").innertext= miaStringa;

e faccio la prova in un <div id="scritta"></div>

invece di uscire scritto nel div appunto : ciao<br/>&egrave<br/>da <br/>parecchio

mi torna di nuovo :
ciao
è
da
parecchio

ed il secondo problema è che non so che sintassi inserire a posto di xxxxxxxx :

HTML:

var tx = document.createTextNode(xxxxxxx);

per far si che quando faccio inserisci riga mi compare nella cella la scritta : ciao<br/>&egrave<br/>da <br/>parecchio, spero di essere stato chiaro...
Perdonami ma non è sempre semplice farsi intendere...

Vale2 · 20 Set 2012

Ciao,

quindi vuoi visualizzare il testo inserito non formattato come codice html ma in formato testo.

devi fare il replace di < e > sostituire í nei replace con &iacute in questo modo nel div ti stampa í nel div

Ciao <br/>è da parecchio <br/>che non ti vedo

per la seconda vedo dopo.

Valeria.

cavaliere123 · 20 Set 2012

Ok.... chiaramente funziona.....
o usi il form risultato o usi il div giustamente

una curiosità... sostituire í nei replace con &iacute ed ok
ma a posto di <br/> che metto altrimenti mi porta a capo cosa scrivo ?

e aspetto con impazienza anche la questione del tex.node

Grazie di cuore

Vale2 · 20 Set 2012

Ciao,

1) Sostituzione di tutte le & con &
2) Replace di < e >

Codice:

miaStringa = miaStringa.replace(/\</g, "&lt;");
miaStringa = miaStringa.replace(/\>/g, "&gt;");

Valeria.

Simone Cori · 29 Gen 2015

ma se al posto di avere le due textarea in un unico form le avessi in due form differenti ade esempio:

<form name="inserisci">
<textarea name="testo" cols="35" rows="15"></textarea></form>
<br><br>
<form name="ricevi"><textarea name="risultato" cols="35" rows="15"></textarea></form><br><br>
<input type="button" value="Clicca" onclick="rimpiazza('ricevi', 'risultato')"> <input type="reset" value="Cancella">

come dovrei fare per ottenere lo stesso risultato??

Cerca

Cerca

Inserire in un div il risultato di una funzione ma senza cambiare formattazione

cavaliere123

Utente Attivo

cavaliere123

Utente Attivo

Vale2

Utente Attivo

cavaliere123

Utente Attivo

Vale2

Utente Attivo

cavaliere123

Utente Attivo

Vale2

Utente Attivo

cavaliere123

Utente Attivo

Vale2

Utente Attivo

Simone Cori

Nuovo Utente

Discussioni simili