webentwicklung-frage-antwort-db.com.de

Wie kann ich neue Zeilen-/Wagenrückläufe in ein Element.textContent einfügen?

So dumm es auch klingen mag, ich habe noch keine passende Antwort gefunden.

Angenommen, ich möchte ein neues DOM-Element dynamisch erstellen und dessen textContent/innerText Mit einem JS-String-Literal auffüllen.
Die Zeichenfolge ist so lang, dass ich sie in drei Stücke teilen möchte:

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";

Das Problem ist, wenn ich schreibe

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

es funktioniert nicht, wahrscheinlich weil der Browser das '\ n' als reinen Text betrachtet und als solches anzeigt (das\r funktioniert auch nicht).

Andererseits könnte ich h1.innerHTML anstelle von textContent ändern und schreiben:

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

Hier würde das <br /> den Job machen, aber dies würde nicht nur den Textinhalt ersetzen, sondern den gesamten HTML-Inhalt meiner h1, was ich nicht so will.

Gibt es eine einfache Möglichkeit, mein Problem zu lösen?
Ich würde nicht auf die Erstellung mehrerer Blockelemente zurückgreifen, nur um den Text in verschiedenen Zeilen zu haben. 
.__ Jede Idee wäre sehr dankbar. 
Danke im Voraus.

45
user1236489

Ich weiß, dass diese Frage schon vor langer Zeit gepostet wurde.

Ich hatte vor einigen Tagen ein ähnliches Problem. Ich übergab den Wert des Webservices im json-Format und platzierte ihn in tablecellcontentText.

Da der Wert im Format übergeben wird, beispielsweise "text row1\r\ntext row2" und so weiter.

Für eine neue Zeile in textContent müssen Sie \r\n verwenden, und schließlich musste ich css white-space: pre-line; verwenden (Text wird bei Bedarf umbrochen und in Zeilenumbrüchen), und alles läuft gut. 

Oder Sie können nur white-space: pre; verwenden, und der Text wird dann nur in Zeilenumbrüchen (in diesem Fall \r\n) umgebrochen.

Es gibt also ein Beispiel, wie Sie das Problem lösen, indem Sie Text nur in Zeilenumbrüchen umbrechen:

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);

74
nelek

Ich bin vor einiger Zeit darauf gestoßen. Eine gute Lösung war die Verwendung der ASCII - Darstellung von Wagenrückläufen (CODE 13). JavaScript verfügt über eine praktische Funktion namens String.fromCharCode(), die die Zeichenfolgenversion eines ASCII - Codes oder mehrere durch ein Komma getrennte Codes generiert. In meinem Fall musste ich eine CSV-Datei aus einer langen Zeichenfolge generieren und in einen Textbereich schreiben. Ich musste den Text aus dem Textbereich ausschneiden und in Notepad speichern können. Bei dem Versuch, die <br />-Methode zu verwenden, werden die Wagenrückläufe nicht beibehalten. Bei Verwendung der fromCharCode-Methode werden die Rückgaben jedoch beibehalten. Siehe meinen Code unten:

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);

Weitere Informationen zu dieser Methode finden Sie hier: w3Schools-fromCharCode ()

Hier finden Sie die Codes für ASCII: ASCII - Codes

31
JBausmer

Sie können reguläre Ausdrücke verwenden, um die Zeichen "\ n" oder "\ n\r" durch "<br />" zu ersetzen.

du hast das:

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";

sie können Ihre Charaktere folgendermaßen ersetzen:

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

Überprüfen Sie die JavaScript-Referenz für die String- und Regex-Objekte:

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

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

5
Rodrigo

Sie können die Zeichenfolgen verketten ...

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
Icarus

Verwenden Sie element.innerHTML="some \\\\n some";.

3
martin

Keine der oben genannten Lösungen funktionierte für mich. Ich habe versucht, einem <p>-Element einen Zeilenvorschub und zusätzlichen Text hinzuzufügen. Normalerweise verwende ich Firefox, benötige aber Browserkompatibilität. Ich habe gelesen, dass nur Firefox die textContent-Eigenschaft unterstützt, nur Internet Explorer unterstützt die innerText-Eigenschaft, beide unterstützen jedoch die innerHTML-Eigenschaft. Das Hinzufügen von <br /> oder \n oder \r\n zu keiner dieser Eigenschaften führte jedoch zu einer neuen Zeile. Folgendes hat jedoch funktioniert:

<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>

Ich habe festgestellt, dass das Einfügen von \\n funktioniert. Das heißt, Sie entkommen dem neuen Zeilenzeichen

2
Elendurwen

Der folgende Code funktioniert gut (auf FireFox, IE und Chrome):

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

document.getElementById("demo").innerHTML = display_out;
0
Apprentice

die Antwort von nelek ist die beste, die bisher veröffentlicht wurde, aber sie hängt von der Einstellung des css-Werts ab: white-space: pre, was möglicherweise unerwünscht ist.

Ich möchte eine andere Lösung anbieten, die versucht, die eigentliche Frage zu lösen, die hier hätte gestellt werden sollen:

"Wie fügt man nicht vertrauenswürdigen Text in ein DOM-Element ein?"

Wenn Sie dem Text vertrauen, verwenden Sie nur innerHTML.

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

sollte für alle vernünftigen Fälle ausreichend sein.

Wenn Sie entschieden haben, dass Sie .textContent anstelle von .innerHTML verwenden, bedeutet dies, dass Sie dem Text, den Sie gerade einfügen, nicht vertrauen, oder? Dies ist ein berechtigtes Anliegen.

Beispielsweise haben Sie ein Formular, in dem der Benutzer einen Beitrag erstellen kann, und nachdem er veröffentlicht wurde, wird der Beitragstext in Ihrer Datenbank gespeichert und später an Seiten angehängt, wenn andere Benutzer die entsprechende Seite besuchen.

Wenn Sie innerHTML hier verwenden, erhalten Sie eine Sicherheitsverletzung. ein Benutzer kann so etwas posten

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

(Versuchen Sie sich vorzustellen, dass [] sind <>, anscheinend ist der Stapelüberlauf Text auf unsichere Art und Weise!)

bei Verwendung von innerHTML wird keine Warnung ausgelöst, es sollte jedoch eine Vorstellung davon vermittelt werden, warum die Verwendung von innerHTML zu Problemen führen kann. Ein klügerer Benutzer würde posten 

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

dies würde eine Warnung für jeden anderen Benutzer auslösen, der die Seite besucht. Jetzt haben wir ein Problem. Ein noch intelligenterer Benutzer würde display: none auf diesen Img-Stil setzen und die Cookies des aktuellen Benutzers auf einer domänenübergreifenden Website veröffentlichen. Herzlichen Glückwunsch, alle Ihre Anmeldedaten für Benutzer werden jetzt im Internet angezeigt.

Das Wichtigste zu verstehen ist, dass die Verwendung von innerHTML nicht falsch ist. Es ist perfekt, wenn Sie es nur zum Erstellen von Vorlagen verwenden, die nur Ihren eigenen vertrauenswürdigen Entwicklercode verwenden. Die eigentliche Frage hätte lauten müssen: "Wie füge ich nicht vertrauenswürdigen Anwendertext, der Zeilenumbrüche enthält, an mein HTML-Dokument an".

Dies wirft eine Frage auf: Welche Strategie verwenden wir für Zeilenumbrüche? verwenden wir [br] -Elemente? [p] s oder [div] s?

Hier ist eine kurze Funktion, die das Problem löst:

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);
        }
    }
}

Sie können dies im Grunde irgendwo in Ihre Datei common_functions.js werfen und dann einfach abfeuern und vergessen, wann immer Sie jeden nicht benutzten/api/etc -> nicht vertrauenswürdigen Text anhängen müssen (dh nicht vom eigenen Entwickler-Team geschrieben) Ihre HTML-Seiten.

anwendungsbeispiel:

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

der Parameter newlineStrategy akzeptiert nur gültige dom-Element-Tags. Wenn Sie also [br] newlines verwenden möchten, übergeben Sie 'br'. Wenn Sie jede Zeile in einem [p] -Element verwenden möchten, übergeben Sie 'p' usw.

0
Aqo