kostenloser Webspace werbefrei: lima-city


Text aus Textbox direkt ausgeben

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    moneyprojekt

    moneyprojekt hat kostenlosen Webspace.

    Hallo, wie kann man mit JS den Text aus einer Textbox direkt wieder als normalen Text ausgeben?

    <textarea name="text" cols="50" rows="10"></textarea>


    Dass jede eingabe weiter unten als Text steht. Könnt ihr mir helfen?
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    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>
  4. Autor dieses Themas

    moneyprojekt

    moneyprojekt hat kostenlosen Webspace.

    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>
  5. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    Wichtig dabei ist noch, dass HTML-Code auch interpretiert wird, also wenn du
    <b>fett</b>
    in die textarea eingibst wird das auch als fett ausgegeben... das müsstest du noch nachbearbeiten, damit das nicht passiert.

    Beitrag zuletzt geändert: 16.6.2012 22:07:27 von hackyourlife
  6. Autor dieses Themas

    moneyprojekt

    moneyprojekt hat kostenlosen Webspace.

    hackyourlife schrieb:
    Wichtig dabei ist noch, dass HTML-Code auch interpretiert wird, also wenn du
    <b>fett</b>
    in die textarea eingibst wird das auch als fett ausgegeben... das müsstest du noch nachbearbeiten, damit das nicht passiert.


    Stimmt, ich möchte aber auch die Möglichkeit bieten in Fett zu schreiben, aber eher durch
    [b]
    , gibt es eine ähnliche Möglichkeit wie in PHP mit preg_replace? Also zuerst alles ersetzen und dann sowas wie htmlentities.

    Beitrag zuletzt geändert: 16.6.2012 22:11:06 von moneyprojekt
  7. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    moneyprojekt schrieb:
    Stimmt, ich möchte aber auch die Möglichkeit bieten in Fett zu schreiben, aber eher durch
    [b]
    , gibt es eine ähnliche Möglichkeit wie in PHP mit preg_replace? Also zuerst alles ersetzen und dann sowas wie htmlentities.
    Meinst du so etwas wie hier?
    Falls du sowas selber schreiben willst musst du schon halbwegs gut Javascript beherrschen :-P

    Ansonsten:
    function htmlunformat(text) {
    	return text
    		.replace(/<br\s?\/?>/g, '\n')
    		.replace(/&quot;/g, '"')
    		.replace(/&gt;/g, '>')
    		.replace(/&lt;/g, '<')
    		.replace(/&amp;/g, '&');
    }
  8. Autor dieses Themas

    moneyprojekt

    moneyprojekt hat kostenlosen Webspace.

    hackyourlife schrieb:
    moneyprojekt schrieb:
    Stimmt, ich möchte aber auch die Möglichkeit bieten in Fett zu schreiben, aber eher durch
    [b]
    , gibt es eine ähnliche Möglichkeit wie in PHP mit preg_replace? Also zuerst alles ersetzen und dann sowas wie htmlentities.
    Meinst du so etwas wie hier?
    Falls du sowas selber schreiben willst musst du schon halbwegs gut Javascript beherrschen :-P

    Ansonsten:
    function htmlunformat(text) {
    	return text
    		.replace(/<br\s?\/?>/g, '\n')
    		.replace(/&quot;/g, '"')
    		.replace(/&gt;/g, '>')
    		.replace(/&lt;/g, '<')
    		.replace(/&amp;/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.
  9. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    moneyprojekt schrieb:
    Könntest du mir vll eine einfache Version davon erklären? Dass es die Zeichen zählt, und BBCodes umwandelt?
    Leider ist BBCodes in HTML umwandeln nicht ganz so einfach...
    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
    [code]
    auch Formatierung möglich, weil die Verschachtelung eben nicht auf Gültigkeit geprüft werden kann.

    Für Formatierungen in der Form
    [b]
    fet
    [/b]
    und
    [i]
    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...

    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.
  10. Autor dieses Themas

    moneyprojekt

    moneyprojekt hat kostenlosen Webspace.

    hackyourlife schrieb:
    moneyprojekt schrieb:
    Könntest du mir vll eine einfache Version davon erklären? Dass es die Zeichen zählt, und BBCodes umwandelt?
    Leider ist BBCodes in HTML umwandeln nicht ganz so einfach...
    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
    [code]
    auch Formatierung möglich, weil die Verschachtelung eben nicht auf Gültigkeit geprüft werden kann.

    Für Formatierungen in der Form
    [b]
    fet
    [/b]
    und
    [i]
    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...

    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?
  11. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    moneyprojekt schrieb:
    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?
    Willst du das jetzt mit der einfachen Variante mit
    preg_replace
    machen? Oder verwendest du das aufwendige Script mit neuen Regeln?
    Natürlich lässt sich das mit beiden Varianten erreichen... du musst nur sagen wie du das haben möchtest.
  12. Autor dieses Themas

    moneyprojekt

    moneyprojekt hat kostenlosen Webspace.

    preg_replace funktioniert doch nur über php, und nicht direkt. Ich sollte eine direkte Vrschau haben, am besten so einfach wie möglich.
  13. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    moneyprojekt schrieb:
    preg_replace funktioniert doch nur über php, und nicht direkt.
    Das ist schon richtig, aber es gibt auch in JavaScript sowas ähnliches.

    Welche Tags soll es denn jetzt geben?
    [b]
    /
    [u]
    /
    [i]
    /
    [url]
    und was noch?

    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, '&amp;')
    		.replace(/</g, '&lt;')
    		.replace(/>/g, '&gt;')
    		.replace(/\"/g, '&quot;')
    		.replace(/\n/g, '<br />');
    }
    
    function htmlunformat(text) {
    	return text
    		.replace(/<br\s?\/?>/g, '\n')
    		.replace(/&quot;/g, '"')
    		.replace(/&gt;/g, '>')
    		.replace(/&lt;/g, '<')
    		.replace(/&amp;/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>');
    }
  14. Autor dieses Themas

    moneyprojekt

    moneyprojekt hat kostenlosen Webspace.

    "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
    [url]test.net[/url]
    und wv mal
    [url=test.net|]test[/url]
    benutz wurde, hätt ich endlich den js Teil, und könnt mit meinem eigentlichen Projekt weitermachen.

    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
  15. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!