La réponse de nelek est la meilleure publiée jusqu'à présent, mais elle repose sur le réglage de la valeur css : white-space: pre, ce qui peut être indésirable.
J'aimerais offrir une solution différente, qui tente de répondre à la vraie question qui aurait dû être posée ici :
"Comment insérer du texte non fiable dans un élément DOM ?"
Si vous faites confiance au texte, pourquoi ne pas simplement utiliser innerHTML ?
domElement.innerHTML = trustedText.replace(/\r/g, '').replace(/\n/g, '');
devrait être suffisant pour tous les cas raisonnables.
Si vous avez décidé d'utiliser .textContent au lieu de .innerHTML, cela signifie que vous ne faites pas confiance au texte que vous êtes sur le point d'insérer, n'est-ce pas ? C'est une préoccupation raisonnable.
Par exemple, si vous avez un formulaire où l'utilisateur peut créer un message, et après l'avoir publié, le texte du message est stocké dans votre base de données, puis ajouté aux pages chaque fois que d'autres utilisateurs visitent la page concernée.
Si vous utilisez innerHTML ici, vous créez une faille de sécurité. c'est-à-dire, un utilisateur peut publier quelque chose comme
alert(1);
ce qui ne déclenchera pas d'alerte si vous utilisez innerHTML, mais cela devrait vous donner une idée des problèmes que l'utilisation de innerHTML peut poser. Un utilisateur plus malin pourrait publier
ce qui déclencherait une alerte pour chaque autre utilisateur qui visite la page. Maintenant, nous avons un problème. Un utilisateur encore plus malin pourrait mettre display: none sur ce style d'image, et faire en sorte qu'il envoie les cookies de l'utilisateur actuel vers un site cross-domain. Félicitations, tous les détails de connexion de vos utilisateurs sont désormais exposés sur internet.
Donc, la chose importante à comprendre est que l'utilisation de innerHTML n'est pas mauvaise, c'est parfait si vous l'utilisez simplement pour construire des modèles en n'utilisant que votre propre code de développeur de confiance. La vraie question aurait dû être "comment ajouter du texte utilisateur non fiable qui contient des sauts de ligne à mon document HTML".
Cela soulève une question : quelle stratégie utilisons-nous pour les sauts de ligne ? utilisons-nous des éléments
? des
s ou des ?
~~
Voici une courte fonction qui résout le problème :
function insertUntrustedText(domElement, untrustedText, newlineStrategy) {
domElement.innerHTML = '';
var lines = untrustedText.replace(/\r/g, '').split('\n');
var linesLength = lines.length;
if(newlineStrategy === 'br') {
for(var i = 0; i < linesLength; i++) {
domElement.appendChild(document.createTextNode(lines[i]));
domElement.appendChild(document.createElement('br'));
}
}
else {
for(var i = 0; i < linesLength; i++) {
var lineElement = document.createElement(newlineStrategy);
lineElement.textContent = lines[i];
domElement.appendChild(lineElement);
}
}
}
Vous pouvez essentiellement placer cela quelque part dans votre fichier common_functions.js et simplement l'utiliser à chaque fois que vous devez ajouter un texte non fiable d'un utilisateur/api/etc (c'est-à-dire non écrit par votre propre équipe de développeurs) à vos pages html.
exemple d'utilisation :
insertUntrustedText(document.querySelector('.myTextParent'), 'line1\nline2\r\nline3', 'br');
le paramètre newlineStrategy n'accepte que des balises d'élément dom valides, donc si vous voulez des sauts de ligne [br], passez 'br', si vous voulez que chaque ligne soit dans un élément [p], passez 'p', etc.
~~
