Regex, um Thumbnails zu erstellen!?!?! (aber das ist verrückt!)

Question

Also hier ist meine Situation, und die Lösung, die ich habe, um das Problem zu lösen. Ich habe eine Anwendung erstellt, die TinyMCE enthält, damit Benutzer HTML-Inhalt zum Veröffentlichen erstellen können. Der Benutzer kann Bilder in das Markup einfügen und die Bilder, die sich auf die endgültigen Attribute für Breite/Höhe im IMG-Tag auswirken, ziehen/skalieren. Das ist alles toll, die Benutzer können Bilder aufnehmen und sie in ihrer gewünschten Form verändern. Aber ein großes Problem ist, dass ich jetzt ein (möglicherweise) viel größeres Bild an den Client sende, nur damit der Browser das Bild in die angeforderten Breiten-/Höhenattribute skaliert. All diese Bandbreite und verlorene Ladezeit ....

Meine Lösung besteht also darin, den Markup-Inhalt meiner Benutzer vorzuverarbeiten, alle IMG-Tags zu scannen und die Height/Width/Src-Attribute zu analysieren. Setzen Sie dann das SRC-Tag jedes Imgs auf eine phpThumb-Anfrage, wobei die analysierte Höhe/Breite in die Thumbnails-URL übernommen wird. Dadurch wird mein verkleinertes Bild erstellt (Optimierung der Bandbreite auf Kosten von CPU und Caching). Was denkst du über diese Lösung? Ich habe andere Posts gesehen, in denen Leute mod_rewrite benutzt haben, um etwas ähnliches zu tun, aber ich möchte den Inhalt des Seiten-Services beeinflussen und die Bild-Anfragen nicht so manipulieren, wie sie empfangen werden. .... Irgendwelche Gedanken zu diesem Design?

Ich brauche Hilfe mit den feinen Details, da meine Regex-Fähigkeiten etwas Arbeit brauchen, aber ich bin sehr kurz an der Zeit und verspreche, meine technische Kenntnisse Schulden bald zu bezahlen. Um die Regex einfacher zu machen, bin ich mir einiger Dinge sicher. Nur img-Tags, die diese Verarbeitung benötigen, haben eine vorhandene width = "" height = "" Attribute (mit den doppelten Anführungszeichen und unteren verkleinerten Text, aber ich denke, die Übereinstimmung Groß- und Kleinschreibung ist besser, wenn TinyMCE ändert)

Also eine Regex, um nur die notwendigen Img-Tags zu finden, und vielleicht noch drei Regexs, um die src, die Breite und die Höhe zu extrahieren?

Danke an alle.

Answer 1

Ich denke, mit regexs für das eine schlechte Idee ist, und Sie würden besser dran Parsen es so etwas wie PHP Simple HTML DOM Parser verwenden, dann können Sie so etwas wie zu tun:

// Load HTML from a string 
$html->load($your_posted_content); 

// Find all images 
foreach($html->find('img') as $element) 
     echo $element->src . '<br>'; 

Answer 2

Generell RegEx is not good for HTML parsing .. Aber in In Ihrem Fall können Sie damit durchkommen, wenn Sie den Umfang sehr eng begrenzen (dh nur nach den Attributen width=".." und height=".." suchen .. oder so ähnlich).

Eine bessere Lösung könnte sein, den Inhalt von TinyMCE asynchron zu übertragen, die Szenen zu verschachteln und serverseitig mit einem geeigneten HTML/XML-Parser zu verarbeiten und dann den Inhalt des Editors zu aktualisieren, sobald dies erledigt ist.

Answer 3

Dies versuchen:

(?i)<img(?>\s+(?>src="([^"]*)"|width="([^"]*)"|height="([^"]*)"|\w+="[^"]*"))+

, dass jeder Bild-Tag übereinstimmt, und wenn die src, width und height Attribute vorhanden sind, werden ihre Werte in den Gruppen 1, 2 und 3, die jeweils gespeichert werden, . Aber es benötigt keine dieser Attribute zu sein, so dass Sie überprüfen möchten, dass alle drei Gruppen Werte vor der Verarbeitung enthalten.