Questo è un breve codice JavaScript che converte qualsiasi URL di un'immagine nel codice HTML necessario affinché l'immagine venga visualizzata sul web, in particolare all'interno di un commento.
Fa la stessa cosa se l'indirizzo è all'interno di un link ( <a href... ) o se si tratta di un video di YouTube o Vimeo, ma ovviamente, in quest'ultimo caso, visualizza un video.
In breve: se qualcuno aggiunge un link a un'immagine o a un video, o semplicemente il suo indirizzo, all'interno di un commento sul tuo blog, questo codice farà apparire quell'immagine o quel video all'interno di quel commento .
Questo è ciò che puoi vedere attualmente in funzione su questo Codepen .
Non hai bisogno di jQuery o altro. Individua semplicemente il </body> del tuo template e incolla quanto segue subito prima:
<script>//<![CDATA[
!function(){for(var a=/(\[img\])?((http:|https:)?\/\/\S*?\.(jpg|gif|png|bmp|jpeg]))(\[\/img\])?/gi,b=/(\[v id\])?http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)? [\w\?=]*)?(\[\/vid\])?/gi,c=/(\[vid\])?(http:|https:)?\/\/(vimeo.com)\/([0-9]*)(\[\/vid\])?/gi,d=document.querySelectorAll(".comment-content"),e=0;e<d.length;e++){for(var f=d[e].getElementsByTagName("a"),g=0;g<f.length;g++)if(f[g].href.match(a)||f[g].href.match(b)||f[g].href.match(c)){var h=document.createElement("span");h.innerHTML=f[g].href;var i=f[g];i.parentNode.insertBefore(h,i),f[g].href="",f[g].innerHTML=""}var j=d[e].innerHTML;j=j.replace(a,'<img style="larghezza massima: 100%; altezza: auto; display: blocK; margine: 10px auto;" src="$2"" alt=""/>'),j=j.replace(b,'<div style="posizione: relativa; larghezza: 100%; altezza: 0; padding-bottom: 56,25%; overflow: nascosto; margine: 20px auto;"><iframe style="posizione: assoluta; larghezza: 100%; altezza: 100%; parte superiore: 0; sinistra: 0;" src="https://www.youtube.com/embed/$2" frameborder="0" allowfullscreen></iframe></div>'),j=j.replace(c,'<div style="posizione: relativa; larghezza: 100%; altezza: 0; padding-bottom: 56.25%; overflow: nascosto; margine: 20px auto;"><iframe style="posizione: assoluta; larghezza: 100%; altezza: 100%; parte superiore: 0; sinistra: 0;" src="https://player.vimeo.com/video/$4" frameborder="0" allowfullscreen></iframe></div>'),d[e].innerHTML=j}}();
//]]></script>
Per chi conosce JavaScript e segue il codice e i commenti del Codepen sopracitato , che ha un codice meno compatto (e quindi più leggibile), l'algoritmo che ho utilizzato è stato:
Definisci le espressioni regolari regimg , regyt e regvim per individuare rispettivamente gli URL delle immagini, dei video di YouTube e dei video di Vimeo.
Passa a un oggetto tutti gli elementi presenti in comment-content , che è il selettore che comprende tutti i commenti.
Otteniamo tutti i link per quell'oggetto per verificare se corrispondono a uno qualsiasi dei tre elementi che stiamo cercando (immagini, YouTube o Vimeo). In questo caso, rimuoviamo il link e lasciamo solo l'URL. Lo facciamo in modo che il passaggio successivo garantisca una sostituzione pulita, senza interferenze da URL duplicati ( href e img ).
Negli ultimi tre passaggi sostituiamo, a seconda dei casi, ciascun URL con il codice HTML necessario per visualizzare un'immagine o un video.
Lo spiego perché è possibile includere in modo simile servizi diversi da YouTube e Vimeo, semplicemente aggiungendo un'espressione regolare, una condizione e una routine di sostituzione per ciascuno di essi . Modificando leggermente le espressioni regolari, si potrebbe persino creare il proprio
codice BBCode , anche se i più esperti tra voi avranno già visto [img] in giro, giusto?
Commenti
Posta un commento