Zeilenumbruch in der Browserausgabe

Sempervivum · 10. Januar 2019

Damit es funktioniert musst Du:

Einen Text mit Zeilenumbrüchen definieren
Die Funktion nicht nur definieren sondern auch aufrufen
Den geänderten Text auch ausgeben:

Code

<style>
.textcontainer {
border: 2px solid lightblue;
}
</style>
<div class="textcontainer" id="textcontainer1"></div>
<div class="textcontainer" id="textcontainer2"></div>
<script>
// Text definieren
var thetext = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,\n\
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n\
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.\n\
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,\n\
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n\
sed diam voluptua.';
// Funktion definieren
function nl2br(str, is_xhtml) {
if (typeof str === 'undefined' || str === null) {
return '';
}
var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}
// Funktion aufrufen, um den Text umzuwandeln
var newtext = nl2br(thetext);
// Originalen und umgewandelten Text ausgeben
document.getElementById("textcontainer1").innerHTML = thetext;
document.getElementById("textcontainer2").innerHTML = newtext;
</script>

Alles anzeigen

Rufst Du dann die Seite auf, erkennst Du, dass der originale Text ohne Zeilenumbrüche dargestellt wird, aber der umgewandelte mit.

nl2br.png

Arne Drews · 11. Januar 2019

Arne Drews schrieb:

Das würde doch reichen

JavaScript

str = str.replace( /(\\r)?\\n\s?/ig, '<br>' );

guggsdu:

https://codepen.io/anon/pen/qLJyLL?editors=1010

aber macht es ruhig auf komplizierte Weise weiter, wird schon...

m.scatello · 11. Januar 2019

Wird hier ein Zeilenumbruch zur "Never ending Story"?

Warum hört hier keiner auf Arne? Beratungsresistent?

scratchy · 11. Januar 2019

Hallo Arne,

ok ich habs versucht, aber die Browserausgabe stimmt nicht, ich habe es so eingegeben:

HTML

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div><script>
('Hallo Welt.\n\
Welcome to this site');
str = str.replace( /(\\r)?\\n\s?/ig, '<br>' );
</script></div>
</body>
</html>
Ist das richtig?

Alles anzeigen

m.scatello · 11. Januar 2019

Zurück zu #32

Scheint wirklich eine "Never ending story" zu werden.

Schreibe mal vor

Code

str = str.replace( /(\\r)?\\n\s?/ig, '<br>' );

diese Zeile

Code

alert(str);

basti1012 · 11. Januar 2019

m.scatello schrieb:

Schreibe mal vor

Code

str = str.replace( /(\\r)?\\n\s?/ig, '<br>' );

diese Zeile

Code

alert(str);

Bitte nicht.Das wurde ihn schon paar mal gesagt und ich denke langsam das es nix mehr wird hier.

Ich habe schon komplizierte Themen gesehen die nicht so lange gedauert haben.

So langsam sollten wir scratchy auf die sprünge helfen.

Er hat hier ja schon Lösungen die alle Funktionieren und ....Kp was ich noch sagen soll.

Hier noch nee Lösung. Damit solltes du vieleicht auch verstehen was die ganze Zeit mit #32 gemeint ist

Code

<body>
<div>
<script>
var text='Hallo Welt.\n\ Welcome to this site';
str = text.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '<br>');
document.write(str);
</script>
</div>
</body>

m.scatello · 12. Januar 2019

basti1012 schrieb:

So langsam sollten wir scratchy auf die sprünge helfen.

Nein, sollten wir nicht, nur du kannst es wieder mal nicht lassen. Wir winken hier nicht nur mit dem Zaunpfahl, sondern schon mit dem ganzen Zaun. Und wenn dann jemand noch immer nichts versteht, sollte er sich erst mal mit den Grundlagen beschäftigen, bevor in einem Forum aus so einfachen Sachen ein Endlosthread entsteht!

Arne Drews · 12. Januar 2019

Solange immer noch sowas drin steht:

Code

('Hallo Welt.\n\
Welcome to this site');

kann man ihm gar nicht helfen. Das Testen eines Script erfordert, dass die Basis fehlerfrei ist, ansonsten gibt es hier nur rumgerate.

Dass #42 funktioniert zeigt der dort verlinkte CodePen. Bring Dein Core-Script i.O. und teste es dann erneut.

Es macht keinen Sinn uminöse Lösungen zu finde, die kompatibel mit den Kernfehlern sind.

EDIT: Ach ein Hinweis noch, wenn Du die Variante aus #42 nochmal testen willst, nimm die RegEx aus dem CodePen, die weicht um einen gewissen Punkt von der im Beitrag ab.

scratchy · 13. Januar 2019

Hallo Leute,

@Arne:

Ich hab jetzt den Text aus #42 in meinen netbeans-editor eingegeben. Es sieht nun so aus:

HTML

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div> <style>
.textcontainer {
border: 2px solid lightblue;
}
</style>
<div class="textcontainer" id="textcontainer1"></div>
<div class="textcontainer" id="textcontainer2"></div>
<script>
// Text definieren
var thetext = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,\n\
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n\
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.\n\
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,\n\
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n\
sed diam voluptua.';
// Funktion definieren
function nl2br(str, is_xhtml) {
if (typeof str === 'undefined' || str === null) {
return '';
}
var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}
// Funktion aufrufen, um den Text umzuwandeln
var newtext = nl2br(thetext);
// Originalen und umgewandelten Text ausgeben
document.getElementById("textcontainer1").innerHTML = thetext;
document.getElementById("textcontainer2").innerHTML = newtext;
</script>
</div>
</body>
</html>

Alles anzeigen

Ich habe nun noch eine Fehlermeldung in Zeile 14 beim <style>:

Element "style" is missing required attribute "scoped". Was fehlt, bzw. was ist noch falsch

m.scatello · 13. Januar 2019

Die style-Angabe gehört zwischen <head> und </head> oder besser, in eine externe CSS-Datei

scratchy · 17. Januar 2019

Hi Scatello,

meinst Du so?:

HTML

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.textcontainer {
border: 2px solid lightblue;
}
</style>
</head>
<body>
<div>
<div class="textcontainer" id="textcontainer1"></div>
<div class="textcontainer" id="textcontainer2"></div>
<script>
// Text definieren
var thetext = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,\n\
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n\
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.\n\
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,\n\
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n\
sed diam voluptua.';
// Funktion definieren
function nl2br(str, is_xhtml) {
if (typeof str === 'undefined' || str === null) {
return '';
}
var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}
// Funktion aufrufen, um den Text umzuwandeln
var newtext = nl2br(thetext);
// Originalen und umgewandelten Text ausgeben
document.getElementById("textcontainer1").innerHTML = thetext;
document.getElementById("textcontainer2").innerHTML = newtext;
</script>
</div>
</body>
</html>

Alles anzeigen

basti1012 · 17. Januar 2019

Ja genau so meint er das.

Glückwunsch! Du hast jetzt einen Funktioniereden Code.

Vieleicht nicht gerade der kürzeste,aber das mußt du ja wissen.

Es wurden dir ja genug möglichkeiten gezeigt.

Tue dir selbst ein gefallen und ließ dich da mal ein https://www.html-seminar.de/html-grundlagen.htm

Damit du beim nächsten mal das alleine hinbekommst oder zumindest das verstehst was dir die Leute sagen wollen.

scratchy · 17. Januar 2019

Hallo Basti,

Vielen Dank an Euch nochmal. Ich bin schon mitten im Seminar ;). Nun kann ich auch vermuten, dass es (zumindest in Firefox und Internet Explorer) im Browser vielleicht deswegen nicht klappt, weil es mit dem Cache Probleme gibt und nicht weil der Code falsch ist. Mir hat mein Freund mal empfohlen im Browser einzustellen, Caches und Datenbanken für Websites nicht zuzulassen (weil es sein könnte, dass ältere und damit falsche Versionen meines Codes den Fehler verursachen).

Gesagt, getan, aber ich hab das Problem immer noch. (Ich hab auch im Chrome-Browser gesucht, wo ich das einstellen könnte, aber noch nicht gefunden.)

basti1012 · 17. Januar 2019

geht das bei dir jetzt überhaupt irgendwo in einen Browser ?

Wenn der Browser auf der Cache zugreift kann es natürlich sein das es nicht geht wenn was geändert wurde.

Lösch doch mal deine Cache und teste dann deinen Code in jeden Browser.

Wenn du ihn so wie eben auf deiner Webseite eingebaut haben solltest dann sollte es auch gehen.

Hast du deinen Code den schon irgendwo hochgeladen ?

Dann gib dochmal den Link , vieleicht hast du beim Kopieren da doch noch ein Fehler rein gehauen

scratchy · 17. Januar 2019

basti1012 schrieb:

geht das bei dir jetzt überhaupt irgendwo in einen Browser ?

Wenn der Browser auf der Cache zugreift kann es natürlich sein das es nicht geht wenn was geändert wurde.

Lösch doch mal deine Cache und teste dann deinen Code in jeden Browser.

Wenn du ihn so wie eben auf deiner Webseite eingebaut haben solltest dann sollte es auch gehen.

Hast du deinen Code den schon irgendwo hochgeladen ?

Dann gib dochmal den Link , vieleicht hast du beim Kopieren da doch noch ein Fehler rein gehauen

Alles anzeigen

Hallo Basti,

ich benutze Netbeans, da gibt es einen Knopf, um den Code in den Browser(meiner Wahl) zu laden, ich hab noch keine Website bzw. das hochgeladen.

Vielleicht hab ich den Cache auch nicht erfolgreich gelöscht. Ich schau als nächstes im Internet, wie man jetzt bei jedem Browser den Cache löscht und meld mich dann.

scratchy · 17. Januar 2019

Hey Basti, es geht, es geht,

es lag die ganze Zeit an Netbeans, an diesem verflixten Knopf. Wenn ich die Datei aus dem Ordner heraus öffne, geht alles.

scratchy · 17. Januar 2019

scratchy · 28. Januar 2019

Hallo Leut ;),

Mich würde mal Eure Meinung interessieren:

Wenn ich einen Inhalt im Kopf habe und möchte diesen durch eine Website repräsentieren, wie gehe ich dann am besten vor?

Bis jetzt mache ich es so, dass ich erstmal in einem Editor alles so reinschreibe und dann editiere, solange, bis ich zufrieden mit dem Inhalt bin.

Dann füge ich das in meine Entwicklungsumgebung Netbeans ein und übersetze alles in HTML.

Wäre es vielleicht cooler, direkt meine Gedanken in HTML zu schreiben, ich hätte dann weniger Aufwand, jedoch wäre zumindest am Anfang der Gedankenfluss zum Inhalt stockender.

Viele Grüße,

Scratchy

Arne Drews · 28. Januar 2019

Ich skizziere mir manchmal sogar erst noch alles auf einem Blatt Papier.

Daraus kann man hinterher ganz gut die Struktur für das Layout ableiten und in HTML übernehmen.

scratchy · 29. Januar 2019

Arne Drews schrieb:

Ich skizziere mir manchmal sogar erst noch alles auf einem Blatt Papier.

Daraus kann man hinterher ganz gut die Struktur für das Layout ableiten und in HTML übernehmen.

Hallo Arne,

Ist denn deine Skizze schon in HTML (oder wie meinst Du das, dass Dus übernimmst)? Das heisst, Du überlegst Dir den Inhalt parallel zur Struktur?