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

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
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

Utente Attivo
31 Lug 2012
416
0
16
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

Utente Attivo
28 Mag 2006
446
0
0
Livorno
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 &nbsp;

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

Utente Attivo
31 Lug 2012
416
0
16
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.
 

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
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

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Ciao,

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

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

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

per la seconda vedo dopo.


Valeria.
 
Ultima modifica:

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
Ok.... chiaramente funziona.....
o usi il form risultato o usi il div giustamente :)

una curiosità... sostituire &iacute; nei replace con &amp;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

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Ciao,

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


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

Valeria.
 

Simone Cori

Nuovo Utente
29 Gen 2015
2
0
0
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??
 
Discussioni simili
Autore Titolo Forum Risposte Data
A inserire variabile php colore in div html PHP 2
M [HTML] Inserire un div tra altri div già esistenti HTML e CSS 7
L [Javascript] Come inserire codice dopo un div in automatico Javascript 2
F [Javascript] Inserire il contenuto di una pagina in un Div Javascript 2
F [HTML] Inserire testo all'interno di una div con border radius HTML e CSS 2
L inserire nuovi div id WordPress 6
A inserire la function orologio() in un div Javascript 12
Elisacau [Contact form 7] Inserire Numero auto incrementante WordPress 1
gara1 inserire immagine di sfondo in canvas Javascript 0
FDF182 Inserire pdf in db PHP 3
otto9due Inserire o aggiornare tabella my sql controllando una coppia di valori PHP 7
Couting95 inserire dati da un file di testo in una tabella in php PHP 1
D Inserire link PHP 0
L PHPSpreadsheet inserire dati da file .xlsx/.xls su database PHP 2
P inserire due voci in un titolo post wp WordPress 1
R inserire video nel sito HTML e CSS 15
J Inserire blog wordpress in angular CMS (Content Management System) 0
L inserire dati multi livello PHP 8
G Inserire una scritta Java 1
M Inserire variabile nella value di una hidden PHP 3
S Inserire foto in ogni cella di una tabella Javascript 0
G inserire dati automaticamente in mysql PHP 0
B Vorrei inserire una finestra con messaggio ad un history.back PHP 16
Shyson Inserire placeholder nel campo cerca PHP 5
M Lanciare alert se il codice fiscale è già presente nel db e lasciare la scelta di inserire all'utente PHP 42
atipika INSERIRE ICONE DOWNLOAD E STAMPA WORDPRESS WordPress 10
F Creare un set di date a seconda del frazionamento scelto da inserire in MySQL PHP 6
B inserire valori da una tabella a un altra mysql PHP 34
D [Javascript] inserire uno script in un file php Javascript 6
napuleone [HTML] type="file" inserire path di partenza HTML e CSS 4
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
R [WordPress] Inserire campi aggiuntivi ad un Submit Form già dato dal template (front-end) WordPress 0
M inserire i dati ottenuti da una jquery in una tabella già esistente jQuery 1
G Inserire "Leggi il resto dell'articolo" con link al post sul sito preso via RSS Email Marketing 0
M [PHP] Come inserire codice html in un ciclo while PHP 2
P [PHP] Inserire stringhe in input(text),memorizzarle e stamparle in file successivo PHP 0
J [Javascript] Inserire un caricamento con animazione prima dell'esecuzione di un'azione Javascript 1
Shyson [PHP] Inserire testo nel codice PHP 2
D Mailchimp - Possibile inserire doppia condizione per i triggers? Email Marketing 0
A [MS Access] Pulsante per inserire allegati in campo maschera MS Access 0
Shyson [HTML] Inserire nuovo font con @font-face HTML e CSS 5
Alex_70 Inserire photo in php PHP 0
D [Javascript] [HTML] Inserire slash dopo 3 numeri Javascript 5
F INSERIRE IN UN'UNICA CASELLA DI TESTO REPORT ACCESS I VALORI DELLA TABELLA DI UN'INTERA COLONNA MS Access 2
A [HTML] Come inserire google review stars nelle pagine del mio sito HTML e CSS 0
spider81man Connettersi ad un DB ed inserire dati con Javascript Javascript 3
spider81man [PHP] Inserire file .pdf in db PHP 6
P [WordPress] Inserire codice in pagina dinamica WordPress 0
A [PHP] Ciclare array multidimensionale e inserire valori in DB PHP 2
M [PHP] Inserire array nel db PHP 6

Discussioni simili