Text aus Textbox direkt ausgeben
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ausgeben
baum
beherrschen
bieten
code
dank
darstellung
dokument
ersetzen
fett code
form
formatierung
http
test
text
umwandeln
url
vorkommen
zeichen
zusatz
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du könntest sowas machen:
<textarea id="text" name="text" cols="50" rows="10"></textarea><br /> <input type="button" onclick="settext();" value="copy" /><br /> Hier kommt der Text her:<pre id="ausgabe"></pre> <script type="text/javascript"><!-- function settext() { var eingabe = document.getElementById('text'); document.getElementById('ausgabe').innerHTML = eingabe.value; } // --></script> -
hackyourlife schrieb:
Du könntest sowas machen:<textarea id="text" name="text" cols="50" rows="10"></textarea><br /> <input type="button" onclick="settext();" value="copy" /><br /> Hier kommt der Text her:<pre id="ausgabe"></pre> <script type="text/javascript"><!-- function settext() { var eingabe = document.getElementById('text'); document.getElementById('ausgabe').innerHTML = eingabe.value; } // --></script>
Danke für den Ansatz, habs so gelöst:
<textarea id="text" name="text" cols="50" onKeyUp="settext();" onKeyDown="settext();" rows="10"></textarea><br /> <pre id="ausgabe"></pre> <script type="text/javascript"><!-- function settext() { var eingabe = document.getElementById('text'); document.getElementById('ausgabe').innerHTML = eingabe.value; } </script> -
Wichtig dabei ist noch, dass HTML-Code auch interpretiert wird, also wenn du
in die textarea eingibst wird das auch als fett ausgegeben... das müsstest du noch nachbearbeiten, damit das nicht passiert.<b>fett</b>
Beitrag zuletzt geändert: 16.6.2012 22:07:27 von hackyourlife -
hackyourlife schrieb:
Wichtig dabei ist noch, dass HTML-Code auch interpretiert wird, also wenn du
in die textarea eingibst wird das auch als fett ausgegeben... das müsstest du noch nachbearbeiten, damit das nicht passiert.<b>fett</b>
Stimmt, ich möchte aber auch die Möglichkeit bieten in Fett zu schreiben, aber eher durch
, gibt es eine ähnliche Möglichkeit wie in PHP mit preg_replace? Also zuerst alles ersetzen und dann sowas wie htmlentities.[b]
Beitrag zuletzt geändert: 16.6.2012 22:11:06 von moneyprojekt -
moneyprojekt schrieb:
Meinst du so etwas wie hier?
Stimmt, ich möchte aber auch die Möglichkeit bieten in Fett zu schreiben, aber eher durch
, gibt es eine ähnliche Möglichkeit wie in PHP mit preg_replace? Also zuerst alles ersetzen und dann sowas wie htmlentities.[b]
Falls du sowas selber schreiben willst musst du schon halbwegs gut Javascript beherrschen
Ansonsten:function htmlunformat(text) { return text .replace(/<br\s?\/?>/g, '\n') .replace(/"/g, '"') .replace(/>/g, '>') .replace(/</g, '<') .replace(/&/g, '&'); } -
hackyourlife schrieb:
moneyprojekt schrieb:
Meinst du so etwas wie hier?
Stimmt, ich möchte aber auch die Möglichkeit bieten in Fett zu schreiben, aber eher durch
, gibt es eine ähnliche Möglichkeit wie in PHP mit preg_replace? Also zuerst alles ersetzen und dann sowas wie htmlentities.[b]
Falls du sowas selber schreiben willst musst du schon halbwegs gut Javascript beherrschen
Ansonsten:function htmlunformat(text) { return text .replace(/<br\s?\/?>/g, '\n') .replace(/"/g, '"') .replace(/>/g, '>') .replace(/</g, '<') .replace(/&/g, '&'); }
GENAU, aber wirklich genau das suche ich, ich hab auch so ein Zähler gebastelt, aber habs nur geschafft ihn in einer Box auszugeben und nicht als Text. Könntest du mir vll eine einfache Version davon erklären? Dass es die Zeichen zählt, und BBCodes umwandelt? Wär dir wirklich sehr dankbar. -
moneyprojekt schrieb:
Leider ist BBCodes in HTML umwandeln nicht ganz so einfach...
Könntest du mir vll eine einfache Version davon erklären? Dass es die Zeichen zählt, und BBCodes umwandelt?
Zuerst müssen alle BBCodes gefunden werden und dann ein Baum so wie bei einem XML-Dokument erstellt werden. Dieser Baum muss dann auf Gültigkeit geprüft werden, also ob bestimmte Tags in bestimmten anderen Tags vorkommen dürfen und wenn was ungültig ist muss das in etwas gültiges verwandelt werden. Danach ist der Baum sowas wie eine XML-Darstellung des Textes, der dann ausgegeben werden kann.
Die Variante mit preg_replace hat einen gewaltigen Nachteil: die Gültigkeit kann nicht überprüft werden, und damit wär dann z.B. in
auch Formatierung möglich, weil die Verschachtelung eben nicht auf Gültigkeit geprüft werden kann.[code]
Für Formatierungen in der Form
fet[b]
und[/b]
kursiv[i]
, also wenn es nur so einfache Formatierungen gibt, braucht es natürlich die aufwendige Baumstruktur nicht, das kann auch mit preg_replace erreicht werden. Falls du das gemeint hast und brauchst kann ich dir natürlich auch ein Codebeispiel dafür geben...[/i]
Zeichen zählen und ausgeben:So viele Zeichen: <span id="ausgabe"></span> <script type="text/javascript"><!-- var text = 'irgend ein Text mit vielen Zeichen'; // 34 Zeichen var element = document.getElementById('ausgabe'); element.innerHTML = text.length; // --></script>
Wenn du den fertigen Parser mit allen Feinheiten verwenden willst kannst du einen Blich hierrauf werfen... die Regeldatei müsstest du dann auf jeden Fall deinen Bedürfnissen anpassen. -
hackyourlife schrieb:
moneyprojekt schrieb:
Leider ist BBCodes in HTML umwandeln nicht ganz so einfach...
Könntest du mir vll eine einfache Version davon erklären? Dass es die Zeichen zählt, und BBCodes umwandelt?
Zuerst müssen alle BBCodes gefunden werden und dann ein Baum so wie bei einem XML-Dokument erstellt werden. Dieser Baum muss dann auf Gültigkeit geprüft werden, also ob bestimmte Tags in bestimmten anderen Tags vorkommen dürfen und wenn was ungültig ist muss das in etwas gültiges verwandelt werden. Danach ist der Baum sowas wie eine XML-Darstellung des Textes, der dann ausgegeben werden kann.
Die Variante mit preg_replace hat einen gewaltigen Nachteil: die Gültigkeit kann nicht überprüft werden, und damit wär dann z.B. in
auch Formatierung möglich, weil die Verschachtelung eben nicht auf Gültigkeit geprüft werden kann.[code]
Für Formatierungen in der Form
fet[b]
und[/b]
kursiv[i]
, also wenn es nur so einfache Formatierungen gibt, braucht es natürlich die aufwendige Baumstruktur nicht, das kann auch mit preg_replace erreicht werden. Falls du das gemeint hast und brauchst kann ich dir natürlich auch ein Codebeispiel dafür geben...[/i]
Zeichen zählen und ausgeben:So viele Zeichen: <span id="ausgabe"></span> <script type="text/javascript"><!-- var text = 'irgend ein Text mit vielen Zeichen'; // 34 Zeichen var element = document.getElementById('ausgabe'); element.innerHTML = text.length; // --></script>
Wenn du den fertigen Parser mit allen Feinheiten verwenden willst kannst du einen Blich hierrauf werfen... die Regeldatei müsstest du dann auf jeden Fall deinen Bedürfnissen anpassen.
Danke für die Textvorschau und den Zähler! Was ich eig bräuchte sind Links als BBCode und vll noch als zusatz fett und kursiv. Könnte man dann zählen wv mal Links verwendet hat und die Anzahl auch anzeigen? -
moneyprojekt schrieb:
Willst du das jetzt mit der einfachen Variante mit
Was ich eig bräuchte sind Links als BBCode und vll noch als zusatz fett und kursiv. Könnte man dann zählen wv mal Links verwendet hat und die Anzahl auch anzeigen?
machen? Oder verwendest du das aufwendige Script mit neuen Regeln?preg_replace
Natürlich lässt sich das mit beiden Varianten erreichen... du musst nur sagen wie du das haben möchtest. -
preg_replace funktioniert doch nur über php, und nicht direkt. Ich sollte eine direkte Vrschau haben, am besten so einfach wie möglich.
-
moneyprojekt schrieb:
Das ist schon richtig, aber es gibt auch in JavaScript sowas ähnliches.
preg_replace funktioniert doch nur über php, und nicht direkt.
Welche Tags soll es denn jetzt geben?
/[b]
/[u]
/[i]
und was noch?[url]
Also ein ganz einfacher BBCode-Parser in Javascript:
HTML-Seite:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"> <head> <title>BB-Code-Formatter / JavaScript</title> <style type="text/css"><!-- body { background-color: #FFFFFF; margin-left: 1em; } --></style> <script type="text/javascript" src="parser.js"></script> <script type="text/javascript"><!-- function doformat() { var src = document.getElementById('source-text'); var dst = document.getElementById('formatted-text'); var chr = document.getElementById('visible-chars'); var htmltext = simplebb(src.value); dst.innerHTML = htmltext; chr.innerHTML = '<i>displayed characters: <b>' + html2plain(htmltext).length + '</b></i>'; // character count } // --></script> </head> <body onload="doformat();"> <noscript><b>You must enable JavaScript!</b></noscript> <div> <p id="formatted-text"></p> <p id="visible-chars"></p> </div> <div><textarea id="source-text" onkeyup="doformat();" rows="24" cols="64">[b]BB-Code-Formatter / JavaScript[/b] Please enter some Text and view the result...</textarea></div> </body> </html>Und die parser.js:function htmlformat(text) { return text .replace(/&/g, '&') .replace(/</g, '<') .replace(/>/g, '>') .replace(/\"/g, '"') .replace(/\n/g, '<br />'); } function htmlunformat(text) { return text .replace(/<br\s?\/?>/g, '\n') .replace(/"/g, '"') .replace(/>/g, '>') .replace(/</g, '<') .replace(/&/g, '&'); } // strip tags and convert to plaintext function html2plain(htmltext) { return htmlunformat(htmltext.replace(/<br\s?\/?>/g, '\n').replace(/<img [^>].*?>/g, ' ').replace(/<[^>].*?>/g, '')); } function simplebb(text) { text = htmlformat(text); return text .replace(/\[b\](.*?)\[\/b\]/g, '<b>$1</b>') .replace(/\[u\](.*?)\[\/u\]/g, '<u>$1</u>') .replace(/\[i\](.*?)\[\/i\]/g, '<i>$1</i>') .replace(/\[url\](.*?)\[\/url\]/g, '<a href="$1">$1</a>') .replace(/\[url=([^\]]*?)\](.*?)\[\/url\]/g, '<a href="$1">$2</a>'); } -
"Also ein ganz einfacher BBCode-Parser in Javascript" - Ganz einfach? :D Ich bin dir tausend mal dankbar. Beim umwandeln ist alles da, wenn ich jetzt noch zählen könnte wv mal
und wv mal[url]test.net[/url]
benutz wurde, hätt ich endlich den js Teil, und könnt mit meinem eigentlichen Projekt weitermachen.[url=test.net|]test[/url]
Habs grad selbst probiert, aber ganz blick ich bei deinem Code nicht durch, ich brauch zum schluss die Anzeige von email, name, land und Text, also:
<p id="Email"></p> <p id="Name"></p> <p id="Land"></p> <p id="formatted-text"></p> <p id="visible-chars"></p>
Die id's der Felder sind einfach auch Email, Name und Land.
Ich muss umbedingt JS lernen, ohne kommt man ja mit PHP auch nicht weit...
Riesen Dank für die Hilfe!
Beitrag zuletzt geändert: 17.6.2012 21:55:28 von moneyprojekt -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
