remplacer les sauts de ligne pour les faire fonctionner avec jquery

Question

J'ai le petit script suivant pour prévisualiser un certain texte avant de le soumettre pour le stocker dans une base de données :

jQuery(function($) {
    var input = $('#contents'),
    preview = $('#previewaccordion div.viewcontents');

    input.keyup(function(e) {
        preview.html(input.val());
    });
});

mais si je tape du texte avec des sauts de ligne, il les ignore et les écrit tous sur une seule ligne. Comment puis-je remplacer les sauts de ligne pour qu'ils s'affichent correctement ?

Answer 1

Cela n'a rien à voir avec jQuery : Les sauts de ligne en HTML ne sont pas significatifs, ce sont juste des espaces blancs (comme les espaces et les tabulations).

Pour forcer un saut de ligne en HTML, vous utilisez une balise <br> étiquette. Vous pourriez donc modifier

preview.html(input.val());

à

preview.html(input.val().replace(/\r?\n/g, '<br>'));

Notez que vous n'échappez pas non plus les caractères spéciaux de HTML (comme < o & ), et donc si vous les tapez, votre sortie peut ne pas être correcte. Vous pouvez donc opter pour :

preview.html(input.val().replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\r?\n/g, '<br>'));

Et enfin, j'accrocherais keypress ainsi que keyup Ainsi, vous voyez des caractères créés par la répétition de touches (qui déclenche l'activation de la touche keypress mais pas keyup ).

Exemple concret | source

Answer 2

Je suppose que vous utilisez un textarea pour la saisie. Il y a \n utilisés comme des sauts de ligne, qui n'ont aucune influence en HTML. Vous devez donc les remplacer par des balises br :

input.val().replace(/\n/g, "<br />");

Answer 3

Hiya Démonstration ici : http://jsfiddle.net/STnhV/1/

J'espère que cela vous aidera ! A la vôtre !

Code Jquery :

$(document).ready(function() {
    $('#inputfoo').keyup(function() {
       $('#outputbar').html($(this).val().replace(/\n/g,'<br/>')); 
    });
});

​

Answer 4

Remplacez les sauts de ligne par des balises de rupture html lorsque vous rendez la sortie de la base de données.