AGB  ·  Datenschutz  ·  Impressum  







Anmelden
Nützliche Links
Registrieren

RegEx o.ä. - Problem

Ein Thema von fkerber · begonnen am 12. Aug 2007 · letzter Beitrag vom 17. Aug 2007
Antwort Antwort
Benutzerbild von fkerber
fkerber
(CodeLib-Manager)

Registriert seit: 9. Jul 2003
Ort: Ensdorf
6.723 Beiträge
 
Delphi XE Professional
 
#1

RegEx o.ä. - Problem

  Alt 12. Aug 2007, 18:26
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
Frederic Kerber
  Mit Zitat antworten Zitat
Christian Seehase
(Co-Admin)

Registriert seit: 29. Mai 2002
Ort: Hamburg
11.105 Beiträge
 
Delphi 11 Alexandria
 
#2

Re: RegEx o.ä. - Problem

  Alt 12. Aug 2007, 19:20
Moin Frederic,

probier doch mal, Dein ([a-z]*) durch (.*?) zu ersetzen.
Ich weiss allerdings nicht, ob die JS-Implementierung dass ? kennt.
Tschüss Chris
Die drei Feinde des Programmierers: Sonne, Frischluft und dieses unerträgliche Gebrüll der Vögel.
Der Klügere gibt solange nach bis er der Dumme ist
  Mit Zitat antworten Zitat
Benutzerbild von Khabarakh
Khabarakh

Registriert seit: 18. Aug 2004
Ort: Brackenheim VS08 Pro
2.876 Beiträge
 
#3

Re: RegEx o.ä. - Problem

  Alt 12. Aug 2007, 20:16
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).
Sebastian
Moderator in der EE
  Mit Zitat antworten Zitat
Benutzerbild von fkerber
fkerber
(CodeLib-Manager)

Registriert seit: 9. Jul 2003
Ort: Ensdorf
6.723 Beiträge
 
Delphi XE Professional
 
#4

Re: RegEx o.ä. - Problem

  Alt 12. Aug 2007, 20:27
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
Frederic Kerber
  Mit Zitat antworten Zitat
Benutzerbild von Khabarakh
Khabarakh

Registriert seit: 18. Aug 2004
Ort: Brackenheim VS08 Pro
2.876 Beiträge
 
#5

Re: RegEx o.ä. - Problem

  Alt 12. Aug 2007, 20:49
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 .
Sebastian
Moderator in der EE
  Mit Zitat antworten Zitat
Benutzerbild von fkerber
fkerber
(CodeLib-Manager)

Registriert seit: 9. Jul 2003
Ort: Ensdorf
6.723 Beiträge
 
Delphi XE Professional
 
#6

Re: RegEx o.ä. - Problem

  Alt 13. Aug 2007, 00:56
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
Frederic Kerber
  Mit Zitat antworten Zitat
Thorben77

Registriert seit: 22. Okt 2004
359 Beiträge
 
#7

Re: RegEx o.ä. - Problem

  Alt 13. Aug 2007, 17:45
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.
  Mit Zitat antworten Zitat
Benutzerbild von fkerber
fkerber
(CodeLib-Manager)

Registriert seit: 9. Jul 2003
Ort: Ensdorf
6.723 Beiträge
 
Delphi XE Professional
 
#8

Re: RegEx o.ä. - Problem

  Alt 14. Aug 2007, 00:54
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
Frederic Kerber
  Mit Zitat antworten Zitat
Benutzerbild von fkerber
fkerber
(CodeLib-Manager)

Registriert seit: 9. Jul 2003
Ort: Ensdorf
6.723 Beiträge
 
Delphi XE Professional
 
#9

Re: RegEx o.ä. - Problem

  Alt 14. Aug 2007, 03:02
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]
Frederic Kerber
  Mit Zitat antworten Zitat
Benutzerbild von fkerber
fkerber
(CodeLib-Manager)

Registriert seit: 9. Jul 2003
Ort: Ensdorf
6.723 Beiträge
 
Delphi XE Professional
 
#10

Re: RegEx o.ä. - Problem

  Alt 17. Aug 2007, 15:48
Hi!

Weiß niemand etwas dazu zu sagen?


Ciao, Frederic
Frederic Kerber
  Mit Zitat antworten Zitat
Themen-Optionen Thema durchsuchen
Thema durchsuchen:

Erweiterte Suche
Ansicht

Forumregeln

Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus

Gehe zu:

Impressum · AGB · Datenschutz · Nach oben
Alle Zeitangaben in WEZ +1. Es ist jetzt 08:15 Uhr.
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024 by Thomas Breitkreuz