Mini-Me: "Table-Creator", Javascript string.replace() wird Hilfe benötigt

Moin Leute,
einmal habt ihr mich hier schon gesehen, ist aber lange her und seitdem haben sich meine Kenntnisse in Javascript u.ä. hoffentlich gebessert.
Im weiteren gehe ich mal davon aus, dass ihr wisst, was BBcodes sind.

Wir haben in unserem IP.Board einen Satz benutzerdefinierter BBcodes angelegt, um den Benutzern die Möglichkeit zu geben eine Tabelle zu erstellen (bis jetzt bin ich zwar der einzige der das nutzt, aber das könnte sich ja noch ändern).
Allerdings ist so eine Aneinanderreihung von [table]-, [tr]-, [th]- und [td]-Codes nicht so jedermanns Sache, und deshalb wollte ich ein kleines Tool erschaffen, um ihnen unter die Arme zu greifen.

Was soll dieses Tool nun machen?
Als erstes soll der Benutzer es aufrufen und auf einen Button klicken, der eine Funktion durchläuft und abfragt, wie die Tabelle aussehen soll (Reihen, Spalten, Spaltenbreiten...), das erscheint mir aber als recht einfacher Teil und deshalb habe ich das erst einmal in den Hintergrund gestellt.

Womit ich begonnen habe, ist eine Seite zu erstellen, auf der es einen (div-)Vorschau Bereich gibt, sowie eine Textbox in der der BBcode eingefügt (und später ausgegeben) wird.

Nun soll eben genannte Funktion später mal in diese Textbox das BBcode-Konstrukt einfügen und automatisch eine weitere Funktion aufrufen(, die ebenfalls über einen Button erreichbar ist).
Diese Funktion wiederum soll nun den BBcode in den entsprechenden HTML-Code umwandeln, dafür habe ich mir als "einfache" Methode ausgedacht, dass der Text über das value-Attribut (Zwischenfrage: textarea ist ja ein HTML Element mit öffnendem und schließendem Tag, logischerweise käme mir innerHTML in den Sinn, nur das funktioniert nur insofern, dass der ursprüngliche Textinhalt ausgegeben wird, warum ist das so?) der Textarea entnommen wird und mit mehreren .replace() Nutzungen abgeändert werden soll, bis es schließlich via innerHTML in den (div-)Vorschau Bereich geschrieben wird.

Dann kann der Nutzer die Tabelle bzw. den Inhalt einer Zelle ändern, indem er doppelt auf Entsprechende klickt und den Text editiert (Textbox erscheint in der Zelle, Zelle wird fokussiert), eine via onblur aufgerufene Funktion schreibt den Inhalt aus der Textbox wieder in die Zelle. Nun soll der Benutzer so die Platzhalter-Texte ersetzen können, um dann schließlich eine Umkehrung der 2. Funktion aufzurufen; Der HTML Code soll wieder in BBcode umgewandelt werden können, den der Benutzer dann kopiert und ins Forum einfügt.

Nur bei diesen replace() Funktionen liegen meine Probleme, es wird nicht das ersetzt, was ich gerne hätte.
Da ich weiß, dass ihr mit Quelltext mehr als meinem ganzen Geschwafel anfangen könnt, hier: Ausgabe|Quelltext ist was ich bisher zusammengebastelt habe (um das hier zu posten wäre es zu viel). Ich weiß es ist noch nicht valide zu irgendeinem Standard, aber das kommt später, erstmal Zählen die inneren Werte.

Nun habe ich bereits Beispiele eingefügt, wie das ganze Aussehen soll.
Unten steht der BBcode, der dann eigentlich durch einen Klick auf den Preview Knopf obiges erzeugen sollte.
Um auch die andere Richtung zu testen habe ich auch bereits HTML-Code zwischen die div-Tags geschrieben, der wiederum in den unten gezeigten BBcode umgewandelt werden sollte.

Nun ist es offensichtlich, dass es nicht so läuft, wie ich es gerne hätte.
Ich schätze mal, dass ich die Regulären Ausdrücke innerhalb der replace() Funktionen abändern muss, nur habe ich keine Ahnung, wie bzw. in was.
Also hoffe ich ihr könnt mir ein Paar Denkanstöße geben,
LG, Mini-Me

  1. Hi

    hab mir nich alles anschauen können, aber ich hab ne vermutung:
    /[td=(.+)](.+)[/td]/gi
    so ein regulärer Asudruck ist leider gierig das heißt er findet die längst mögliche übereinstimmung

    [td=bla]xyz[/td][td=blub]xyz[/td]

    da hättest du vermutlich gern das zwei ersetzungen durchgeführt werden, es wird aber nur eine durchgeführt der der text im ganzen ja auch auf den regulärern ausdruck passt.

    So würde ein genügsammer Ausdruck aussehen:

    /[td=(.+)](.+?)[/td]/gi

    Zünni

    1. So würde ein genügsammer Ausdruck aussehen:

      /[td=(.+)](.+?)[/td]/gi

      Joa Danke Zünni, dass war, was ich brauchte.
      Habe jetzt bei beiden RegExp das ? hinzugefügt und es funktioniert in diese Richtung (BBcode -> HTML) einwandfrei.
      Andersherum viel mir auf, dass zumindest Firefox die Attribute umstellt und <tbody>-Tags automatisch einfügt, für beides musste ich den Script anpassen.

      Weitere Tests in Opera, Chrome und Safari waren ebenfalls erfolgreich, lediglich der IE braucht wie immer eine Sonderbehandlung, werde ich mir mal später genauer angucken.
      Habe ich noch einen verbreiteten Win-Browser vergessen?

      LG, Mini-Me