CSS Wörter durch Befehl automatisch ersetzen?
Okay, also ich versuche gerade eine Art overlay für eine bestimmte (nicht meine) Website zu schreiben. Es ist eine Chatsite (omegle(dot)com), die ich häufig für Rollenspiele nutze (nichts versautes, es geht um eine Serie und es ist sind praktisch nur Geschichten, die abwechselnd fortgeführt werden, alles ganz harmlos).
Wie auch immer, seit ich die Chrome Erweiterung "Stylish" gefunden habe, habe ich das Bedürfnis entwickelt, die Seiten, die ich häufig benutze meine Wünschen anzupassen, jedenfalls, was das Layout angeht. Läuft auch alles ganz gut, dank Google und vielen verschiedenen Websites auf denen die verschiedenen Befehle erklärt werden. Ist alles relativ easy zu händeln mit ein bisschen logischem denken.
Was ich aber jetzt versuchen will ist eine Art automatische Wortkorrektur, allerdings gehts mir da mehr um die Formatierung. Die Sache ist, während des schreibens werden Wörter die im Normalfalll kursiv sein sollten, also extra betont werden mit Slash markiert, also zum Beispiel /Auto/, was dann eigentlich Auto ein sollte, da die Seite aber keinen Rich Text editor anbietet hat sich das irgendwie als Ersatz eingebürgert.
Meine Frage ist jetzt ob es nicht möglich wäre, dass alles was ich oder mein jeweiliger Chatpartner mit /.../ markiert im eigentlichen Chatverlauf kursiv und ohne Slash dargestellt werden, so in der Art wie :D und :) etc auf z.B. Facebook in Smileys umgewandelt werden. Da verschwindet die Buchstaben/Symbol Kombination ja auch und wird durch eine Grafik ersetzt. Hoffe jemand kann mir da weiterhelfen.
Danke schon mal im Vorraus :)
2 Antworten
Das kommt auf die Technik darauf an die du einsetzt.
Die Chat-Texte müssen ja irgendwie, irgendwo abgespeichert werden.
Entweder nu nutzt JavaScript mit einer NoSQL Datenbank oder z.B PHP mit mySQL.
Der Chattext wird üblicherweise in eine Variable gesetzt, jetzt kannst du mit JavaScript oder mit PHP die Variable nach besonderen "Anordnungen" durchsuchen und diese durch was anderes ersetzen.
Nehmen wir an du möchtest z.B. mit dem [#b] eine Fettschrift anfangen und mit [*b] die Fettschrift beenden - also [#b]fett[*b] soll zu fett werden.
Beispiel in PHP:
<?php
$text = "Des Wort fett soll [#b]fett[*b] dargestellt werden";
$text = str_replace('[#b]','<b>', $text;
$text = dtr_replace('[*b]','</b>', $text;
echo $text;
?>
Mit CSS geht das nicht, weil CSS auf XML-Auszeichnungen von Text angewiesen ist ("Selektoren"). Und "/" ist keine XML-Auszeichnung. HTML-Tags und -Attribute wären es. Aber die gibt's ja im Chat nicht.
Was gehen könnte, ist ein Javascript in einem Lesezeichen. Die werden im Kontext der Seite ausgeführt, die gerade angezeigt wird, während das Lesezeichen aktiviert wird.
https://en.wikipedia.org/wiki/Bookmarklet
Ich würde einen Ansatz nehmen in der Art, ein setInterval einzusetzen, das jede Sekunde oder so die Chatbox durchsucht und ersetzt.