Intercettare i caratteri di a capo

**artex** · 30-09-2014, 11:22

Ciao a tutti,
in una pagina web ho una textarea id="input" dove scrivo del testo e un elemento html <p id="output"> dove con jquery aggiorno i caratteri che via via scrivo nella textarea:

codice:

       $("#input").bind("keyup", function(event, ui) {
         $("#output")[0].innerHTML = (this.value);
          });

Funziona ma quando vado a capo nella textarea (premo enter) nell'elemento id="ouput" non va a capo

Qualcuno sa dirmi come risolvere?

**Vincent.Zeno** · 30-09-2014, 14:22

vedi si può esser utile:
http://www.html.it/pag/15211/caratteri-speciali/

fai sapere se, e come, risolvi

**artex** · 30-09-2014, 18:12

le sequenze che mi indichi le avevo già provate ma non funzionano.

qualche idea?

**KillerWorm** · 30-09-2014, 20:24

Ciao, nella textarea viene utilizzato, per il ritorno a capo, il carattere speciale \n (vedi il link suggerito). In un paragrafo html, invece, devi usare <br/> (o <br>).
Chiaramente nel tuo caso dovrai andare a sostituire \n con <br/> prima di "trasportare" il testo nel paragrafo.
Una semplice soluzione può essere quella di usare un replace sul valore prelevato dalla textarea.

Esempio:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style type="text/css">
      #output{border:1px solid green}
    </style>
    <script type="text/javascript">
      $(function(){
        $("#input").bind("keyup", function(event, ui) {
          $("#output").html(this.value.replace(/\n/g,"<br/>"));
        });
      })
    </script>
  </head>
  <body>
    <textarea id="input"></textarea>
    <p id="output"></p>
  </body>
</html>

**artex** · 01-10-2014, 09:45

Grazie 1000,
approfitto per chiederti cosa tu memorizzeresti in un database MySQL il testo con \n oppure il testo con i <br /> ?

qui però si va su php, non so se lo usi.
Ho visto che gli a capo (/n) del testo me li riconosce se faccio
$testo = stripslashes($testo);
$testo = htmlspecialchars($testo);
$testo = nl2br($testo); // il testo viene memorizzato in formato esadecimale (/n => 0A)

un ultimo consiglio

Grazie e complimenti per la precisione

**artex** · 08-10-2014, 13:35

Chiederei a killerWorm che mi ha risposto nel precedente post se può guardare il codice che lui stesso ha postato leggermente da me modificato.
La mia necessità è quella di gestire l'evento click su (#otuput) e riportare nella textarea (#input) il testo di #output però con gli a capo.

mi sembra di aver fatto tutti i replace necessari

Ringrazio ancora killerWorm per la precisione e gentilezza

<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.jsx"></script>
<script src="../js/jQuery/jQuery_v1.7.2.js" type="text/javascript"></script>

<style type="text/css">
#output{border:1px solid green}
</style>
<script type="text/javascript">
$(function(){

$("#input").bind("keyup", function(event, ui) {
$("#output").html(this.value.replace(/\n/g,"<br/>"));
});

$("body").on('click', '#output', function() {
var testo = $(this).text();

testo = testo.replace("<br/>",/\n/g)

$("textarea#input").val("");

alert(testo);

$("textarea#input").val(testo);
});

})
</script>
</head>
<body>
<textarea id="input"></textarea>
<p id="output"></p>
</body>
</html>

**KillerWorm** · 09-10-2014, 01:20

Scusami del ritardo nel risponderti, sono stato impegnato.

approfitto per chiederti cosa tu memorizzeresti in un database MySQL il testo con \n oppure il testo con i <br /> ?

Dal momento che questi dati saranno utilizzati in un contesto html, per una semplice questione di logica, sarei portato ad utilizzare la forma con i tag, chiaramente con tutti i dovuti accorgimenti del caso (che tu stesso stai prendendo in considerazione).

La mia necessità è quella di gestire l'evento click su (#otuput) e riportare nella textarea (#input) il testo di #output però con gli a capo.

Puoi usare certamente il metodo replace() ma devi fare attenzione a come va impostato.
Ti invito a rivedere meglio le sue specifiche: http://www.w3schools.com/jsref/jsref_replace.asp

Il primo parametro, specifica il valore da ricercare. Questo può essere espresso come una semplice stringa oppure come una espressione regolare.
Il secondo parametro invece specifica il nuovo valore che dovrà rimpiazzare quello trovato. Questo parametro deve essere una stringa, NON può essere una espressione regolare.

Pertanto questa riga è sbagliata:

codice:

testo = testo.replace("<br/>",/\n/g)

Altro errore è l'uso del metodo jQuery text(), usato nella riga antecedente:

codice:

var testo = $(this).text();

Così come lo hai impostato, otterrai il valore "testuale" del paragrafo #otuput (cui fa riferimento il "this").
A te però non serve il valore testuale, bensì lo script html (con tutti i tag compresi) contenuto in quel paragrafo.
Per tale motivo dovrai usare il metodo html(), lo stesso che ho usato in precedenza per "scrivere" il contenuto html dentro #otuput. In questo caso, però, lo utilizzerai (senza specificare alcun argomento) per prelevare il contenuto html da #otuput, in questo modo:

codice:

var testo = $(this).html()

Ora, ci sono alcune considerazioni doverose da fare per poter recuperare e riconvertire il testo html in maniera opportuna.

Per il replace, teoricamente potresti scrivere così:

codice:

replace("<br/>","\n")

Ma cosa avverrebbe?
Se il primo parametro è una semplice stringa (come in questo caso), la "ricerca" si fermerà alla prima occorrenza trovata e sarà quindi rimpiazzato solo il primo "<br/>" trovato.

In JavaScript non esiste una funzione/metodo replaceAll, per tale motivo ci vengono incontro le espressioni regolari con cui si può utilizzare il flag "g", che indica di eseguire una ricerca globale.

Potremmo quindi scrivere così:

codice:

replace(/<br\/>/g,"\n")

Da tener presente l'eventuale escaping per gli slash all'interno del pattern.

In questo caso tutte le occorrenze di <br/> saranno rimpiazzate con \n.

Ma c'è ancora qualcosa che sfugge.
Quando la tua pagina viene "presentata" sulla finestra del browser, questo ne interpreta i tag html/xhtml in base al doctype (ed eventuali magheggi del browser stesso), e reimposta a dovere l'intero markup. Quindi è possibile che il codice html restituito dal browser, nonché dal metodo html() (il quale restituisce il contenuto interpretato dal browser), abbia delle variazioni nell'impostazione sintattica del markup, per cui non corrisponda esattamente al codice html originario.

Se, ad esempio, il documento ha un doctype per HTML5, tutti i <br/> o i <br /> saranno "convertiti" in <br> (o in <BR> nel caso si stia usando una versione precedente ad IE9).
E se ci sono dei br del tipo <br class="qualcosa">... stessa cosa. Quel replace, impostato così, non potrà funzionare.

Ci vengono ancora in aiuto le espressioni regolari.
Una cosa del genere dovrebbe risolvere in modo apprezzabile:

codice:

replace(/<br[^>]*>/gi,"\n")

Il codice completo:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style type="text/css">
      #output{border:1px solid green}
    </style>
    <script type="text/javascript">
      $(function(){
        $("#input").on('keyup',function(){
          $("#output").html(this.value.replace(/\n/g,"<br/>"));
        });
        $("#output").click(function(){
          var testo = $(this).html();
          $("#input").val("");
          alert(testo);
          testo = testo.replace(/<br[^>]*>/gi,"\n");
          $("#input").val(testo);
        });
      })
    </script>
  </head>
  <body>
    <textarea id="input"></textarea>
    <p id="output"></p>
  </body>
</html>

**artex** · 09-10-2014, 12:33

Davvero grazie infinite per il tempo che mi hai dedicato, sulla tua competenza e precisione mi sono già espresso nei post precedenti.

Gli a capo funzionano e il codice che mi hai postato è a questo punto perfetto.

Ho però ancora un problemino e vorrei sottoporti un frammento di codice, se non ti dispiace, per avere una tua opinione.

Nel mio contesto il paragrafo dell'esempio è all'interno di contenitori div; utilizzando .html() per prelevare il testo del paragrafo con cui valorizzare la textarea mi ritrovo nella textarea anche il tag dei contenitori padre del paragrafo senza i <br> che ovviamente vengono eliminati dal tuo codice.

Nel dom appendo dinamicamente paragrafi che poi modifico con la textarea, e vorrei però chiederti ancora qualche cosa sul modo in cui appendo il paragrafo nel dom, posso postare qualche frammento di codice?

Grazie ancora

**cassano** · 09-10-2014, 12:53

ma
/\n/g

quale è la sua funzione ?

**KillerWorm** · 09-10-2014, 15:11

Originariamente inviata da artex

posso postare qualche frammento di codice?

Certamente.

Originariamente inviata da cassano

ma
/\n/g

quale è la sua funzione ?

Riassumendo quanto già esposto nella discussione: si tratta di una RegExp (espressione regolare) con cui viene cercato il valore \n (carattere speciale utilizzato per il ritorno a capo, ad esempio in una textarea). Il flag g indica di eseguire la ricerca a livello globale (cioè trova tutte le occorrenze anziché fermarsi solo alla prima).

Discussione: Intercettare i caratteri di a capo

Strumenti discussione

Ricerca discussione

Visualizza

Intercettare i caratteri di a capo

Permessi di invio