Regex per generare miniature!?!?! (ma è pazzesco!)

Question

Quindi ecco la mia situazione, e la soluzione che ho trovato per risolvere il problema. Ho creato un'applicazione che include TinyMCE per consentire agli utenti di creare contenuti HTML per la pubblicazione. L'utente può includere immagini nel loro markup e trascinare/ridimensionare quelle immagini che influiscono sugli attributi finali di larghezza/altezza nel tag IMG. Tutto questo è fantastico, gli utenti possono includere immagini e ridimensionarle/trasferirle nell'aspetto desiderato. Ma un grosso problema è che ora sto inviando un'immagine (possibilmente) molto più grande al client, solo per fare in modo che il browser ridimensioni l'immagine negli attributi Width/Height richiesti. Tutta la larghezza di banda e il tempo di caricamento perduto ....

Quindi la mia soluzione è pre-elaborare il mio contenuto di markup degli utenti, scansionare tutti i tag IMG e analizzare gli attributi Height/Width/Src. Quindi imposta ciascun tag SRC di img su una richiesta phpThumb con l'altezza/larghezza analizzata passata nell'URL delle miniature. Questo creerà la mia immagine di dimensioni ridotte (ottimizzando la larghezza di banda a scapito della CPU e della cache). Cosa ne pensi di questa soluzione? Ho visto altri post in cui le persone stavano usando mod_rewrite per fare qualcosa di simile, ma voglio influenzare il contenuto del servizio di pagina e non manipolare le richieste di immagine mentre vengono ricevute. .... Qualche idea su questo design?

Ho bisogno di aiuto con i dettagli precisi in quanto le mie abilità regex richiedono un po 'di lavoro, ma sono molto in ritardo e prometto di pagare presto il mio debito di conoscenze tecniche. Per rendere più facile l'espressione regolare, posso essere sicuro di alcune cose. Solo i tag img che richiedono questa elaborazione avranno gli attributi width = "" height = "" esistenti (con virgolette doppie e testo minuscolo, ma suppongo che la corrispondenza tra maiuscole e minuscole del testo sarebbe migliore se TinyMCE cambia)

Quindi una regex per abbinare solo i tag Img necessari e forse altri tre regex per estrarre src, larghezza e altezza?

Grazie a tutti.

Answer 1

Penso usando regexs per questo è una cattiva idea e si sarebbe meglio analizzarlo usando qualcosa come PHP Simple HTML DOM Parser, allora si può fare qualcosa di simile:

// 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

In generale, RegEx is not good for HTML parsing .. Ma in il tuo caso potresti essere in grado di farla franca se la tua limitazione del campo di applicazione fosse molto ristretta (cioè solo cercando gli attributi width=".." e height=".." .. o qualcosa del genere).

Una soluzione migliore potrebbe essere quella di trasferire il contenuto da TinyMCE in modo asincrono, da buon-le scene, e il processo è lato server con un adeguato parser HTML/XML e quindi aggiornato il contenuto dell'editor una volta fatto.

Answer 3

Prova questo:

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

che abbineranno qualsiasi tag di immagine, e se i src, width e height attributi sono presenti, i loro valori saranno memorizzati in gruppi 1, 2, e 3, rispettivamente, . Ma non è richiedere uno di quegli attributi per essere lì, quindi vorrete verificare che tutti e tre i gruppi contengano valori prima dell'elaborazione.