Comment puis-je insérer une nouvelle ligne/chariot retourne dans un élément.textContent?

aussi stupide que cela puisse paraître, je n'ai toujours pas trouvé de réponse appropriée.

disons que je veux dynamiquement créer un nouvel élément DOM et remplir son textContent/texte interne avec une chaîne js littérale.

La corde est si longue que je voudrais la diviser en trois morceaux:

var h1 = document.createElement("h1");

h1.textContent = "This is a very long string and I would like to insert a carriage return HERE...
moreover, I would like to insert another carriage return HERE... 
so this text will display in a new line";

Le problème est que si j'écris

h1.textContent = "...I would like to insert a carriage return here... n";

cela ne fonctionne pas, probablement parce que le navigateur considère le 'N' comme du texte pur et l'affiche comme tel (le r ne fonctionne pas non plus).

d'un autre côté, je pourrais changer le h1.innerHTML au lieu du textContent et écrire:

h1.innerHTML = "...I would like to insert a carriage return here...<br />";

ici, le
ferait le travail, mais cela remplacerait non seulement le contenu du texte mais tout le contenu HTML de mon h1, ce qui n'est pas tout à fait ce que je veux.

Est-il un moyen simple de résoudre mon problème?

Je n'aurais pas recours à la création de plusieurs éléments de bloc juste pour avoir le texte sur des lignes différentes.

Toute idée serait grandement appréciée.

Merci à l'avance.

42
demandé sur akjoshi 2012-04-02 20:48:24

9 réponses

je sais que cette question a été postée il y a longtemps.

j'ai eu le même problème il y a quelques jours, en passant la valeur du service web dans json formater et placer table cellcontentText.

parce que la valeur est transmise au format, par exemple,"text row1\r\ntext row2" et ainsi de suite.

à la ligne textContent Vous devez utiliser \r\n et, finalement, j'ai dû utiliser css white-space: pre-line; (le Texte est renvoyé à la ligne lorsque cela est nécessaire, et sur les sauts de ligne) et tout va bien.

Ou, Vous pouvez utiliser seulement white-space: pre; et puis le texte est renvoyé à la ligne seulement sur les sauts de ligne (dans ce cas \r\n).

donc, il y a un exemple pour le résoudre avec du texte d'enrubannage seulement sur les sauts de ligne :

var h1 = document.createElement("h1");

//setting this css style solving problem with new line in textContent
h1.setAttribute('style', 'white-space: pre;');

//add \r\n in text everywhere You want for line-break (new line)
h1.textContent = "This is a very long string and I would like to insert a carriage return \r\n...";
h1.textContent += "moreover, I would like to insert another carriage return \r\n...";
h1.textContent += "so this text will display in a new line";

document.body.appendChild(h1);
61
répondu nelek 2017-01-26 12:16:17

je suis tombé dessus il y a un moment. J'ai trouvé qu'une bonne solution était d'utiliser la représentation ASCII des retours de chariot (CODE 13). JavaScript a une fonctionnalité pratique appelée String.fromCharCode() qui génère la version string D'un code ASCII, ou plusieurs codes séparés par une virgule. Dans mon cas, j'avais besoin de générer un fichier CSV à partir d'une longue chaîne de caractères et de l'écrire dans une zone de texte. J'avais besoin d'être en mesure de couper le texte dans la zone de texte et l'enregistrer dans le bloc-notes. Quand j'ai essayé d'utiliser le <br /> méthode il ne serait pas préserver les retours de chariot, cependant, en utilisant la méthode fromCharCode il conserve les retours. Voir mon code ci-dessous:

h1.innerHTML += "...I would like to insert a carriage return here..." + String.fromCharCode(13);
h1.innerHTML += "Ant the other line here..." + String.fromCharCode(13);
h1.innerHTML += "And so on..." + String.fromCharCode(13);
h1.innerHTML += "This prints hello: " + String.fromCharCode(72,69,76,76,79);

Voir ici pour plus de détails sur cette méthode: w3Schools-fromCharCode ()

voir ici pour les codes ASCII:Codes ASCII

32
répondu JBausmer 2014-06-14 17:29:33

Vous pouvez utiliser des expressions régulières pour remplacer les "\n " ou "\n\r caractères' avec '
'.

vous avez ceci:

var h1 = document.createElement("h1");

h1.textContent = "This is a very long string and I would like to insert a carriage return HERE...
moreover, I would like to insert another carriage return HERE... 
so this text will display in a new line";

vous pouvez remplacer vos personnages comme ceci:

h1.innerHTML = h1.innerHTML.replace(/\n\r?/g, '<br />');

vérifier la référence javascript pour les objets String et Regex:

http://www.w3schools.com/jsref/jsref_replace.asp

http://www.w3schools.com/jsref/jsref_obj_regexp.asp

5
répondu Rodrigo 2012-04-02 17:10:15

Vous pouvez concaténer les cordes...

h1.innerHTML += "...I would like to insert a carriage return here...<br />";
h1.innerHTML += "Ant the other line here... <br />";
h1.innerHTML += "And so on...<br />";

jsFiddle.

4
répondu Icarus 2012-04-02 16:51:32

Utiliser element.innerHTML="some \\n some";.

3
répondu martin 2012-06-14 19:55:53

Aucune des deux solutions n'a fonctionné pour moi. J'ai essayé d'ajouter un saut de ligne et le texte supplémentaire à un <p> élément. J'utilise généralement Firefox, mais j'ai besoin de compatibilité avec le navigateur. J'ai lu que seul Firefox supporte le textContent propriété, seul Internet Explorer supporte le innerText propriété, mais les deux supportent le innerHTML propriété. Cependant, aucun ajout <br /> ni \n ni \r\n pour l'une de ces propriétés ont conduit à une nouvelle ligne. La suite, cependant, n'a travail:

<html>
<body>
<script type="text/javascript">
  function modifyParagraph() {

  var p;
  p=document.getElementById("paragraphID");
  p.appendChild(document.createElement("br"));
  p.appendChild(document.createTextNode("Additional text."));
}    
</script>

<p id="paragraphID">Original text.</p>

<input type="button" id="pbutton" value="Modify Paragraph" onClick="modifyParagraph()" />
</body>
</html>
2
répondu Slogmeister Extraordinaire 2015-06-24 17:00:27

j'ai trouvé que l'insertion d' \n fonctionne. I. e., de vous échapper de l'échappé caractère de nouvelle ligne

2
répondu Elendurwen 2016-07-29 12:11:37

le code suivant fonctionne bien (sur FireFox, IE et Chrome):

var display_out = "This is line 1" + "<br>" + "This is line 2";

document.getElementById("demo").innerHTML = display_out;
0
répondu Apprentice 2016-03-01 07:27:41

la réponse de nelek est la meilleure affichée jusqu'à présent, mais elle repose sur la définition de la valeur css: white-space: pre, qui pourrait être indésirable.

j'aimerais proposer une solution différente, qui tente de répondre à la vraie question qui aurait dû être posée ici:

"Comment insérer non approuvé le texte dans un élément du DOM?"

si vous faites confiance au texte, pourquoi ne pas simplement utiliser innerHTML?

domElement.innerHTML = trustedText.replace(/\r/g, '').replace(/\n/g, '<br>');

devrait être suffisant pour tout le raisonnable cas.

Si vous avez décidé que vous devez utiliser .textContent au lieu de .innerHTML, ça veut dire que tu ne fais pas confiance au texte que tu es sur le point d'insérer, n'est-ce pas? C'est une préoccupation raisonnable.

par exemple, vous avez un formulaire où l'utilisateur peut créer un message, et après l'avoir posté, le texte du message est stocké dans votre base de données, et ensuite ajouté aux pages chaque fois que d'autres utilisateurs visitent la page concernée.

si vous utilisez innerHTML ici, vous obtenez une faille de sécurité. c'est à dire, un utilisateur peut post quelque chose comme

[script]alert(1);[/script]

(essayez d'imaginer que [] sont <>, apparemment le débordement de la pile ajoute du texte de manière dangereuse!)

ce qui ne déclenchera pas d'alerte si vous utilisez innerHTML, mais cela devrait vous donner une idée pourquoi utiliser innerHTML peut avoir des problèmes. un utilisateur plus intelligent posterait 

[img src="invalid_src" onerror="alert(1)"]

qui déclencherait une alerte pour chaque autre utilisateur qui visite la page. Maintenant, nous avons un problème. Un utilisateur encore plus intelligent mettrait display: none sur ce style img, et faire il affiche les cookies de l'utilisateur courant à un site de domaine croisé. Félicitations, tous vos détails de connexion utilisateur sont maintenant exposés sur internet.

donc, la chose importante à comprendre est, utiliser innerHTML n'est pas mal, c'est parfait si vous l'utilisez juste pour construire des gabarits en utilisant seulement votre propre code de développeur de confiance. La vraie question aurait dû être "Comment puis-je ajouter un texte utilisateur non fiable qui a des nouvelles lignes à mon document HTML".

cela soulève une question: Quelle stratégie doit-on adopter? utiliser pour les nouvelles lignes? utilisons-nous [br] éléments? [p]ou [div]s?

Voici une fonction courte 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 jeter cela quelque part dans vos fonctions communes.le fichier js et puis juste le feu et oublier chaque fois que vous avez besoin d'ajouter un utilisateur/api/etc -> texte non fiable (c.-à-d. non-écrit-par-votre-propre-équipe de développement) à vos pages html.

exemple d'utilisation:

insertUntrustedText(document.querySelector('.myTextParent'), 'line1\nline2\r\nline3', 'br');

le paramètre newlineStrategy n'accepte que les dom valides les balises d'élément, donc si vous voulez [br] des retours à la ligne, pass 'br', si vous voulez que chaque ligne dans un [p] élément, pass 'p', etc.

0
répondu Aqo 2018-05-31 09:23:05