RegEx o.ä. - Problem

[fkerber]

Hi!

Ich versuche mein Problem mal zu umreißen...

Es geht um die "Programmierung" eines Online WYSIWYG-HTML-Editors mittels JavaScript / PHP. Es gibt da zwar zig fertige, aber allen fehlt eine wichtige Eigenschaft: der Verzicht auf [b][i] o.ä.
Ziel ist die also die Nachrüstung, die aus o.g. Tags die CSS-Entsprechungen baut. Grundlage ist der Editor TinyMCE, aber das tut wohl an sich nichts zur Sache.

Was super funktioniert ist das Umwandeln der Tags zu <span>. Dazu folgende RegEx:

Code:

value = value.replace(/[b]/g, "<span style='font-weight: bold'>");
value = value.replace(/<\/strong>/g, "<\/span>");

Natürlich kann der Editor aber die <span>-Formatierungen nicht weiter bearbeiten. Also müssen diese wieder zurückgeführt werden in [b] bzw. entsprechende Tags.

Und da liegt der Haken! Wie ich es auch angehe, gehts schief:
Erste Idee:

Code:

value = value.replace(/<span style='font-weight: bold'>([a-z]*)<\/span>/g, '[b]$1[/b]');

Das funktioniert (wie ja eigentlich beabsichtigt) nur, wenn zwischen dem Anfangs- und dem Endtag die Zeichen a-z vorkommen. Wird also der Text zwischendrin noch anders formatiert (z.B. <span style='font-style: italic'>Text</span>) schlägt die RegEx fehl, da ja bspw. < nicht zu den erlaubten Zeichen gehört.

Also anderer Gedanke, zwischen Anfangs und Endtag einfach alles erlauben: (.+)
Der Haken folgt auf dem Fuß, da wird dann natürlich als Text zwischen Anfangs- und Endtag alles betrachtet, was zwischen dem Anfangstag und dem letzen </span> liegt. (Was man ja auch von der RegEx her verstehen kann)

Also auch nicht im Sinne des Erfinders. Jetzt gehen mir aber die Ideen aus...

Ich hoffe ihr wisst, was ich meine?! Wie kann ich diese ganzen spans wieder ordentlich umwandeln?
Ich kann den </span> ja nicht mitgeben, zu welchem Anfang sie das Ende bilden?!

Wie macht man so etwas?


Ciao, Frederic

[Christian Seehase]

Moin Frederic,

probier doch mal, Dein ([a-z]*) durch (.*?) zu ersetzen.
Ich weiss allerdings nicht, ob die JS-Implementierung dass ? kennt.

[Khabarakh]

Leider wird dich auch der Lazy-Operator nicht weiterhelfen, sobald geschachtelte spans ins Spiel kommen - das übersteigt einfach die Fähigkeit von Regexen. Allerdings haben viele Regex-Implementationen die regulären Sprachen schon längst hinter sich gebracht und streben nach Höherem, mit der .Net-Fx-Implementation dürfte es afaik zum Bleistift funktionieren. Ansonsten bleibt dir eben nichts anderes übrig als einen richtigen (was nicht heißt, dass dafür nicht 20 Zeilen genügen können) Parser/Konverter zu schreiben/suchen (ideal wäre natürlich XSLT).

[fkerber]

Hi!

Hmm, wie sollte mir denn das ? da weiterhelfen? Es besagt doch nur, dass der Ausdruck (in deinem Bsp. also jedes beliebige Zeichen) 0x oder 1x vorkommt? In wie weit löst das mein Problem?

Wie sollte denn ein solcher Parser aussehen? Bzw. wie sollte ich einen solchen finden, so es ihn denn gäbe? Bei der ganzen Sache habe ich bisher sowieso nicht verstanden, dass es für dieses Problem scheinbar noch keine Lösung gibt...


Ciao, Frederic

[Khabarakh]

Zitat von fkerber:

Hmm, wie sollte mir denn das ? da weiterhelfen? Es besagt doch nur, dass der Ausdruck (in deinem Bsp. also jedes beliebige Zeichen) 0x oder 1x vorkommt?

Hinter einem + oder * hat das Fragezeichen eine andere Bedeutung, schließlich sagen ja schon + oder * etwas über die Quantität aus. Hier wird das ? zum Lazy-Operator - der Regex verschlingt nicht mehr so viel Text wie möglich (greedy) sondern so wenig wie nötig (lazy).

Zitat:

Wie sollte denn ein solcher Parser aussehen?

Die einfachste Lösung, die mir gerade einfällt:
Finde das innerste Span-Element (soll heißen: ein <span>-</span>-Paar, in dem kein "<span" zu finden ist) und ersetze es
Wiederhole solange, bis alle spans ersetzt sind.
Diese Abfrage könnte man sogar doch in einem Regex formulieren, perfekt ist es aber immer noch nicht.Das sind zwar eher seltene Fälle (z.B. ein "<span" in einem Attribut), für volle Perfektion bräuchtest du aber dann doch einen Parser, der eben unter Anderem die Attribute auslässt.
Hoffentlich habe ich dich jetzt nicht noch mehr verwirrt . Regexes sind wirklich cool, aber irgendwo liegen eben die Grenzen...

Zitat:

Bei der ganzen Sache habe ich bisher sowieso nicht verstanden, dass es für dieses Problem scheinbar noch keine Lösung gibt...

Wie gesagt, mit XHTML dürfte das Problem banal sein .

[fkerber]

Hi!

Zitat:

Wie gesagt, mit XHTML dürfte das Problem banal sein

Wie meinst du das?

Das mit dem Parser habe ich soweit verstanden und versuche mal, das entsprechend umzusetzen...



Ciao, Frederic

[Thorben77]

Zitat von fkerber:

Es gibt da zwar zig fertige, aber allen fehlt eine wichtige Eigenschaft: der Verzicht auf [b][i] o.ä.
Ziel ist die also die Nachrüstung, die aus o.g. Tags die CSS-Entsprechungen baut.

Der Verzicht auf das strong- und das em-Element soll wichtig sein? Stattdessen sollen aussagelose span-Elemente eingefügt werden?

HTML und XHTML sind Auszeichnungssprachen. em und strong zeichnen Text als betont bzw. stark betont aus. Warum sollte man darauf verzichten? CSS ist nicht alles.

[fkerber]

Hi!

Das mag ja sein, es ist aber nunmal so, dass CSS auch andere Vorteile hat. Bspw. muss in dem "aussaglosen" span auch nicht unbedingt nur ein bold o.ä. drinstehen, sondern es kann auch eine klasse drinstehen, die für viele Elemente das Aussehen regelt und später dann zentral an einer Stelle geändert werden kann.

Außerdem liefert der FireFox von Haus aus bei diesen JavaScript-Editoren die Formatierung in <span> zurück.


Ich will hier eigentlich keine Diskussion HTML-Tags vs. CSS-Formatierungen anzetteln, aber ich habe mich für CSS zur Formatierung entschieden und suche dafür einen Weg...

(Ich habe ihn mittlerweile fast gefunden und werde den Code später hier veröffentlichen, wenn es denn wirklich fehlerfrei geht)


Ciao, Frederic

[fkerber]

Hi!
Ich erstelle jetzt ausnahmsweise zwei Beiträge hintereinander, da der hier dann kompakt den Code enthält.

Ausgeführt wird der Code (Javascript-Code) in einem "Event", dass der tinyMCE abfeuert, wenn Text in den Editor geladen wird oder aus ihm ausgelesen wird...

Unterstützt wird die Umwandlung der Formatierungen "Fett", "Kursiv", "Unterstrichen" und "Ausrichtung". Von Haus aus kann der Editor Schriftformatierungen (also Farbe und Schriftgröße) von "normal" zu <span> und zurück umwandeln. Diese Elemente werden also in untenstehendem Code quasi übersprungen.

Einen Fehler konnte ich nicht finden, alles hat bislang einwandfrei funktioniert. Über die Art und Weise der Umwandlung kann man vllt. streiten und deswegen würde ich euch um Anregungen bitten, falls ihr etwas anders/schneller/besser machen würdet.

Nun also der Code:

Code:

function myCustomCleanup(type, value) 
{

  if (type == "get_from_editor") 
  {
    value = value.replace(/[b]/g, "<span style='font-weight: bold'>");
    value = value.replace(/<\/strong>/g, "<\/span>");

    value = value.replace(/<u>/g, "<span style='text-decoration: underline'>");
    value = value.replace(/<\/u>/g, "<\/span>");

    value = value.replace(/[i]/g, "<span style='font-style: italic'>");
    value = value.replace(/<\/em>/g, "<\/span>");

    value = value.replace(/align=\"([a-z]*)\"/g, " style='text-align: $1' ")

   return value;
  }


  if (type == "insert_to_editor") 
  {
    var i;
    var bold_array = new Array;
    var italic_array = new Array;
    var underline_array = new Array;
    var span_array = new Array;
    var color_array = new Array;
    var fs_array = new Array;
    var position;
    var pos;
    var k = 0;
    var value1 = "";
    var lastinserted =  new Array();
 
    value = value.replace(/style=\'text-align: ([a-z]*)\'/g, " align='$1' ");
    value = value.replace(/style=\"text-align: ([a-z]*)\"/g, " align='$1' ");

    i = 0;
    while (value.indexOf("<span style='font-weight: bold'>", i) != -1) 
    {
      position = value.indexOf("<span style='font-weight: bold'>", i);
      bold_array.push(position+"b");
      i = 1+position;
    }

    i = 0;
    while (value.indexOf("<span style='font-style: italic'>", i) != -1)
    {
      position = value.indexOf("<span style='font-style: italic'>", i);
      italic_array.push(position+"i");
      i = 1+position;
    }

    i = 0;
    while (value.indexOf("<span style='text-decoration: underline'>", i) != -1) 
    {
      position = value.indexOf("<span style='text-decoration: underline'>", i);
      underline_array.push(position+"u");
      i = 1+position;
    }

    i = 0;
    while (value.indexOf("<span style='color", i) != -1) 
    {
      position = value.indexOf("<span style='color", i);
      color_array.push(position+"x");
      i = 1+position;
    }

    i = 0;
    while (value.indexOf("<span style='font-size", i) != -1) 
    {
      position = value.indexOf("<span style='font-size", i);
      fs_array.push(position+"x");
      i = 1+position;
    }


    i = 0;
    while (value.indexOf("</span>", i) != -1) 
    {
       position = value.indexOf("</span>", i);
       span_array.push(position+"e");
       i = 1+position;
    }

    function Numsort (a, b) 
    {
      a=a.substr(0,((a.length)-1));  
      b=b.substr(0,((b.length)-1));  
     return a - b;
    }

    bold_array = bold_array.concat(italic_array);
    bold_array = bold_array.concat(underline_array);
    bold_array = bold_array.concat(color_array);
    bold_array = bold_array.concat(fs_array);
    bold_array = bold_array.concat(span_array);

    bold_array.sort(Numsort);

    for (i =0; i < bold_array.length; i++)
    {
      pos = bold_array[i].substr(0,((bold_array[i].length)-1));
      endpos = value.indexOf(">",pos);
  
      value1=value1+value.substring(k, pos);
  
 
      if (bold_array[i].substr((bold_array[i].length-1),1) == "b")
      {
        value1 = value1 + "[b]";
        lastinserted.push("[/b]");
      }

      if (bold_array[i].substr((bold_array[i].length-1),1) == "i")
      {
        value1 = value1 + "[i]";
        lastinserted.push("[/i]");
      }

      if (bold_array[i].substr((bold_array[i].length-1),1) == "u")
      {
        value1 = value1 + "<u>";
        lastinserted.push("</u>");
      }

      if (bold_array[i].substr((bold_array[i].length-1),1) == "x")
      {
        value1 = value1 + value.substring(pos,endpos+1);
        lastinserted.push("</span>");
      } 


      if (bold_array[i].substr((bold_array[i].length-1),1) == "e")
      { 
        value1 = value1 + lastinserted.pop();
      }
  
      k = endpos+1;
  
      if (i == (bold_array.length-1))
      {
        value1 = value1 + value.substr(k);
      }
    } /*for-Schleife*/

    if (value1 != "")
    {
      value = value1;
    }
   return value;
  } /*Insert to Editor*/
 return value;
}

Also: Feuer frei


Ciao und danke
Frederic

[edit=Phoenix]Holla, Formatierung war zerlegt. Neu gespeichert wegen Cache... Mfg, Phoenix[/edit]

[fkerber]

Hi!

Weiß niemand etwas dazu zu sagen?


Ciao, Frederic