Comment remplacer tous les sauts de ligne dans une chaîne par des balises?
Comment puis-je lire le saut de ligne à partir d'une valeur avec Javascript et remplacer tous les sauts de ligne par des balises br?
Exemple:
Une variable passée de PHP comme ci-dessous:
"This is man.
Man like dog.
Man like to drink.
Man is the king."
Je voudrais que mon résultat ressemble à ceci après que le Javascript l'ait converti:
"This is man<br /><br />Man like dog.<br />Man like to drink.<br /><br />Man is the king."
10 réponses
Cela transformera tous les retours en HTML
str = str.replace(/(?:\r\n|\r|\n)/g, '<br>');
Si votre préoccupation affiche simplement des sauts de ligne, vous pouvez le faire avec CSS.
HTML
<div class="white-space-pre">Some test
with linebreaks</div>
CSS
.white-space-pre {
white-space: pre-wrap;
}
Jsfiddle https://jsfiddle.net/yk1angkz/125/
Note : faites attention au formatage et à l'indentation du code, car white-space: pre-wrap affichera tous les espaces (sauf pour le dernier saut de ligne après le texte, voir fiddle).
Cela fonctionne pour les entrées provenant d'une zone de texte
str.replace(new RegExp('\r?\n','g'), '<br />');
Si la réponse acceptée ne fonctionne pas correctement pour vous, vous pouvez essayer.
str.replace(new RegExp('\n','g'), '<br />')
Ça a marché pour moi.
Quel que soit le système:
my_multiline_text.replace(/$/mg,'<br>');
Il est également important d'encoder le reste du texte afin de se protéger contre d'éventuelles attaques par injection de script
function insertTextWithLineBreaks(text, targetElement) {
var textWithNormalizedLineBreaks = text.replace('\r\n', '\n');
var textParts = textWithNormalizedLineBreaks.split('\n');
for (var i = 0; i < textParts.length; i++) {
targetElement.appendChild(document.createTextNode(textParts[i]));
if (i < textParts.length - 1) {
targetElement.appendChild(document.createElement('br'));
}
}
}
Pour ceux d'entre vous qui veulent juste permettre à max. 2 <br> dans une rangée, vous pouvez utiliser ceci:
let text = text.replace(/(\r?\n){2,}/g, '<br><br>');
text = text.replace(/(\r?\n)/g, '<br>');
Première ligne: Recherchez \n ou \r\n où au moins 2 d'entre eux sont dans une rangée, par exemple \n\n\n\n. Ensuite, remplacez-le par 2 br
Deuxième ligne: Recherchez tous les simples \r\n ou \n et remplacez-les par <br>
Cela a fonctionné pour moi quand la valeur est venue d'une zone de texte:
string.replace(/\n|\r\n|\r/g, '<br/>');
Si vous envoyez la variable depuis PHP, vous pouvez l'obtenir avec ceci avant d'envoyer:
$string=nl2br($string);