Autor Tema: Implementación simple de tags de YouTube en JavaScript  (Leído 1615 veces)

Desconectado ~

  • Novato
  • *
  • Mensajes: 19
    • Ver Perfil
    • Desarrollo Informático
Implementación simple de tags de YouTube en JavaScript
« en: Agosto 07, 2011, 11:54:50 am »
El siguiente código de JavaScript (comprimido por optimización) acepta tags BBCode [ youtube ] [ /youtube ] para los siguientes tipos de URL:


ID de 11 caracteres (inválido, solo es un ejemplo):
Código: [Seleccionar]
[youtube]rj985A45yHA[youtube]

URL completa:
Código: [Seleccionar]
[youtube]http://www.youtube.com/watch?v=rj985A45yHA[/youtube]
Diferencia y discrimina tags de YouTube que estén dentro de tags CODE de BBCode.


Código: [Seleccionar]
javascript:yur="http://www.youtube.com/";Yu="[/youtube]";yU="[youtube]";db0=document.body;if(db0.innerHTML.indexOf(yU)!=-1&&db0.innerHTML.indexOf(Yu)!=-1){s=new Array("\<co"+"de","\</CO"+"DE","\<pre","\<st"+"yle","\<di"+"v","\<ifr"+"ame","\<tab"+"le","\<fo"+"nt","\<scri"+"pt","\<im"+"g","\<link","\<me"+"ta","\<h","\</h","\<a ","\</a","\<li","\</li","\<str"+"on"+"g","\</strong","\<h"+"r","\<tr","\<t"+"d","\</tr","\</t"+"d","\<ul","\</u"+"l","\<p"+">","\</p"+">","\</scr"+"ipt"+">","\<embed","\</embed","\<br"+">","\<br "+">","\<br "+"/>","\<br");function fi(){return "\<ifr"+"ame width=\"560\" height=\"349\" src=\""+yur+"embed/"+HT+"\" frameborder=\"0\" allowfullscreen\>\</ifr"+"ame\>";}function _1(vr,u){var y=0;var t=true;while(y<s.length && t){if(!u)t=vr.indexOf(s[y])==-1;else t=vr.indexOf(s[y].toUpperCase())==-1;y++;}return t;}function _2(){var y=1;var t=false;while(y<s.length&&!t){t=HbU.indexOf(s[y])==-1&&HbU.indexOf(s[y].toUpperCase())!=-1;y++;}return t;}zl=0;HY="";HbU=db0.innerHTML;Hpr=0;HT="";tOf=0;_cO=0;yTa=0;IS=false;if(_2())IS=true;s[1]="\<co"+"de";while(Hpr<HbU.length){zl++;if(zl==4096)break;if(!IS)_cO=HbU.indexOf("\<co"+"de",Hpr);else _cO=HbU.indexOf("\<CO"+"DE",Hpr);yTa=HbU.indexOf(yU,Hpr);if(_cO!=-1&&(_cO<yTa||yTa==-1)){if(!IS)tOf=HbU.indexOf("\</c"+"ode\>",_cO)+7;else tOf=HbU.indexOf("\</C"+"ODE\>",_cO)+7;if(tOf==(-1+7))tOf=_cO;HY+=HbU.substring(Hpr,tOf);Hpr=tOf;continue;}if(yTa!=-1&&(yTa<_cO||_cO==-1)){tOf=HbU.indexOf(Yu,yTa)+10;if(tOf!=(-1+10)){HT=HbU.substring(yTa,tOf);if(HT.length==yU.length+11+Yu.length){HT=HT.substring(yU.length,yU.length+11);HY+=HbU.substring(Hpr,yTa)+fi();Hpr=tOf;continue;}else if(HT.indexOf(yU)==0&&HT.indexOf(Yu)==HT.length-10&&HT.indexOf("v=")!=-1&&((HT.indexOf(yur)!=-1||HT.indexOf("http://youtube.com/")!=-1)&&(!IS&&_1(HT,false))||(IS&&_1(HT,true)))){HT=HT.substring(HT.indexOf("v=")+2,HT.indexOf("v=")+2+11);HY+=HbU.substring(Hpr,yTa)+fi();Hpr=tOf;continue;}else{if(HT.indexOf(yU,1)!=-1){HT=HT.substring(0,HT.indexOf(yU,1));HY+=HbU.substring(Hpr,yTa)+HT;Hpr+=HbU.substring(Hpr,yTa).length+HT.length;continue;}else{HY+=HbU.substring(Hpr,yTa)+HT;Hpr+=HbU.substring(Hpr,yTa).length+HT.length;continue;}}}}if(HbU.indexOf(yU,Hpr)==-1||HbU.indexOf(Yu,Hpr)==-1){HY+=HbU.substring(Hpr,HbU.length);break;}HY+=HbU.charAt(Hpr);Hpr++;}db0.innerHTML=HY;yur="";Yu="";yU="";s=new Array();HT="";yTa="";HY="";}void(0);


Dentro de poco voy a escribir la explicación, primero para hacer notar que este es el programa "compilado", y después, para diferenciar la versión de desarrollo con comentarios.

Este script funciona con Google Chrome, Internet Explorer, Firefox, Safari, y probablemente otros. Tiene solo 2.31 Kilobytes, y además, si no detecta tags BBCode de YouTube, termina de inmediato; y cuando las detecta, copia todo el contenido del BODY para evitar la lentitud de leer el innerHTML (leer de una variable de texto en lugar de una propiedad HTML es mucho más rápido) así que es altamente eficiente. Soporta hasta unos 1500 posibles videos/secciones HTML del procesamiento por página, y esto puede controlarse cambiando el único 4096 que está en el código. Este 4096 es parte de un control como último recurso para evitar un bucle infinito por algún error inesperado, así que esto limita la iteración del script hasta en 4096 veces posibles, lo cual se puede aumentar, disminuir o eliminar.

Solamente hay que ponerlo entre tags <script></script> justo antes del tag </body> o justo antes del tag </html>. Funciona no solo para foros sino que para cualquier página, incluso páginas web hechas a mano, con BBCode para YouTube.

Desconectado HQH

  • Administrator
  • Miembro Imprescindible
  • *****
  • Mensajes: 1.856
    • Ver Perfil
Re: Implementación simple de tags de YouTube en JavaScript
« Respuesta #1 en: Agosto 07, 2011, 12:31:36 pm »
Buen aporte. Te lo paso a portada. ¿Es de creación propia? ¿Soporta todos los navegadores y sistemas operativos? Saludos.

Desconectado HQH

  • Administrator
  • Miembro Imprescindible
  • *****
  • Mensajes: 1.856
    • Ver Perfil
Re: Implementación simple de tags de YouTube en JavaScript
« Respuesta #2 en: Agosto 07, 2011, 01:43:29 pm »
¿Tienes el codigo fuente sin comprimir? Para hacerlo mas entendible a estudiantes.

Desconectado ~

  • Novato
  • *
  • Mensajes: 19
    • Ver Perfil
    • Desarrollo Informático
Re: Implementación simple de tags de YouTube en JavaScript
« Respuesta #3 en: Agosto 07, 2011, 03:12:58 pm »
Sí, yo lo escribí. Me tardé un día. Pero todavía hace falta cosas como tags con característica de tamaño como:

Código: [Seleccionar]
[youtube=320,480]38S94_sds67[/youtube]
Para eso la lógica cambiaría en varios aspectos, y serían unas horas más de trabajo, aunque tal vez no sea inmediatamente necesario, para ser un video incrustado en una página.


Aquí está sin comprimir:

Código: [Seleccionar]
javascript:

if(document.body.innerHTML.indexOf("[youtube]")!=-1 && document.body.innerHTML.indexOf("[/youtube]")!=-1)
{/*Z*/

function alert_dbg(aaa)
{
 /*alert(aaa);*/
}

var zl=0;

var Hbody="";
var Hbuff=document.body.innerHTML;
var Hbptr=0;
var YTarr=new Array();
var HT="";
var latestoff=0;
var prevoffst=0;
var tmpoffst=0;

var _codeoff=0;
var _ytagoff=0;

var IEStyleUCaseTag=false;
if( (Hbuff.indexOf("\<co"+"de")==-1 && Hbuff.indexOf("\</co"+"de")==-1 &&
     Hbuff.indexOf("\<CO"+"DE")!=-1 && Hbuff.indexOf("\</CO"+"DE")!=-1   )
                                        &&
    (Hbuff.indexOf("\<pre")==-1 && Hbuff.indexOf("\<PRE")!=-1)
    || (Hbuff.indexOf("\<st"+"yle")==-1 && Hbuff.indexOf("\<ST"+"YLE")!=-1)
    || (Hbuff.indexOf("\<di"+"v")==-1 && Hbuff.indexOf("\<DI"+"V")!=-1)
    || (Hbuff.indexOf("\<ifr"+"ame")==-1 && Hbuff.indexOf("\<IFR"+"AME")!=-1)
    || (Hbuff.indexOf("\<tab"+"le")==-1 && Hbuff.indexOf("\<TAB"+"LE")!=-1)
    || (Hbuff.indexOf("\<fo"+"nt")==-1 && Hbuff.indexOf("\<FO"+"NT")!=-1)
    || (Hbuff.indexOf("\<scri"+"pt")==-1 && Hbuff.indexOf("\<SCRI"+"PT")!=-1)
    || (Hbuff.indexOf("\<im"+"g")==-1 && Hbuff.indexOf("\<IM"+"G")!=-1)
    || (Hbuff.indexOf("\<link")==-1 && Hbuff.indexOf("\<LINK")!=-1)
    || (Hbuff.indexOf("\<me"+"ta")==-1 && Hbuff.indexOf("\<ME"+"TA")!=-1)
    || (Hbuff.indexOf("\<h")==-1 && Hbuff.indexOf("\<H")!=-1)
    || (Hbuff.indexOf("\</h")==-1 && Hbuff.indexOf("\</H")!=-1)
    || (Hbuff.indexOf("\<a ")==-1 && Hbuff.indexOf("\<A ")!=-1)
    || (Hbuff.indexOf("\</a")==-1 && Hbuff.indexOf("\</A")!=-1)
    || (Hbuff.indexOf("\<li")==-1 && Hbuff.indexOf("\<LI")!=-1)
    || (Hbuff.indexOf("\</li")==-1 && Hbuff.indexOf("\</LI")!=-1)
    || (Hbuff.indexOf("\<str"+"on"+"g")==-1 && Hbuff.indexOf("\<STR"+"ON"+"G")!=-1)
    || (Hbuff.indexOf("\</strong")==-1 && Hbuff.indexOf("\</STRONG")!=-1)
    || (Hbuff.indexOf("\<h"+"r")==-1 && Hbuff.indexOf("\<H"+"R")!=-1)
    || (Hbuff.indexOf("\<tr")==-1 && Hbuff.indexOf("\<TR")!=-1)
    || (Hbuff.indexOf("\<t"+"d")==-1 && Hbuff.indexOf("\<T"+"D")!=-1)
    || (Hbuff.indexOf("\</tr")==-1 && Hbuff.indexOf("\</TR")!=-1)
    || (Hbuff.indexOf("\</t"+"d")==-1 && Hbuff.indexOf("\</T"+"D")!=-1)
    || (Hbuff.indexOf("\<ul")==-1 && Hbuff.indexOf("\<UL")!=-1)
    || (Hbuff.indexOf("\</u"+"l")==-1 && Hbuff.indexOf("\</U"+"L")!=-1)
    || (Hbuff.indexOf("\<p"+">")==-1 && Hbuff.indexOf("\<P"+">")!=-1)
    || (Hbuff.indexOf("\</p"+">")==-1 && Hbuff.indexOf("\</P"+">")!=-1)
    || (Hbuff.indexOf("\</scr"+"ipt"+">")==-1 && Hbuff.indexOf("\</SCR"+"IPT"+">")!=-1)
    || (Hbuff.indexOf("\<embed")==-1 && Hbuff.indexOf("\<EMBED")!=-1)
    || (Hbuff.indexOf("\</embed")==-1 && Hbuff.indexOf("\</EMBED")!=-1)
    || (Hbuff.indexOf("\<br"+">")==-1 && Hbuff.indexOf("\<BR"+">")!=-1)
    || (Hbuff.indexOf("\<br "+">")==-1 && Hbuff.indexOf("\<BR "+">")!=-1)
    || (Hbuff.indexOf("\<br "+"/>")==-1 && Hbuff.indexOf("\<BR "+"/>")!=-1)
    || (Hbuff.indexOf("\<br")==-1 && Hbuff.indexOf("\<BR")!=-1))IEStyleUCaseTag=true;

while(Hbptr<Hbuff.length)
{
 /*Este es un control del bucle WHILE o FOR.*/
 /*Este admite actualmente hasta 4096 iteraciones*/
 /*antes de detenerse. Es muy útil para detener*/
 /*el bucle en caso de que un error inesperado*/
 /*haga fallar la lógica de este programa y cree*/
 /*un bucle infinito. Es el último recurso para*/
 /*deshacerse de un posible bucle infinito, y puede*/
 /*aumentarse su número o simplemente eliminar esta*/
 /*línea si deseamos poder manejar páginas enormes y/o*/
 /*si estamos totalmente seguros de que no va a darse*/
 /*un bucle infinito NUNCA.*/
 /**/
  zl++;if(zl==4096)break;


 /*Ver cuál viene primero*/
 if(!IEStyleUCaseTag)
  _codeoff=Hbuff.indexOf("\<co"+"de",Hbptr);
 else
  _codeoff=Hbuff.indexOf("\<CO"+"DE",Hbptr);

  _ytagoff=Hbuff.indexOf("[youtube]",Hbptr);
/*alert(
      "_codeoff "+_codeoff+"\n"+
      "_ytagoff "+_ytagoff+"\n"+
      "Hbptr "+Hbptr+"\n"+
      "Hbody.length "+(Hbody.length)+"\n"
     );*/


 /*<code> viene antes que [youtube]*/
  if(_codeoff!=-1 && (_codeoff<_ytagoff || _ytagoff==-1))
  {

   /*Si es así, buscar el tag </code> final más cercano y guardar esta porción*/
   if(!IEStyleUCaseTag)
    tmpoffst=Hbuff.indexOf("\</c"+"ode\>",_codeoff)+7;  /*Buscar </code>*/
   else
    tmpoffst=Hbuff.indexOf("\</C"+"ODE\>",_codeoff)+7;  /*Buscar </code>*/


   /*Si no lo encontramos, usamos el offset de <code> por defecto*/
    if(tmpoffst==(-1+7))tmpoffst=_codeoff;
    Hbody+=Hbuff.substring(Hbptr,tmpoffst); /*Guardamos la porción*/
    Hbptr=tmpoffst; /*actualizamos el puntero del buffer HTML global*/
    continue; /*vamos rápido a la siguiente iteración*/
  }


  /*[youtube] viene antes que <code>*/
  if( _ytagoff !=-1 && (_ytagoff<_codeoff || _codeoff==-1 ))
  {

   /*si es así, buscamos el tag [/youtube] final más cercano y lo procesamos*/
   tmpoffst=Hbuff.indexOf("[/youtube]",_ytagoff)+10; /*Lo buscamos y lo sobrepasamos para abarcarlo*/

   if(tmpoffst!=(-1+10))   /*En caso de encontrarlo efectivamente...*/
   {
    HT=Hbuff.substring(_ytagoff,tmpoffst);  /*Primero tomamos todo el tag, incluyendo el tag mismo*/

    /*Vemos si dentro del tag solo hay 11 caracteres de un ID de video*/
    if(HT.length>="[youtube]".length+11+"[/youtube]".length && HT.indexOf("http://")==-1)
    {
     /*Si es así, extraemos los 11 caracteres del ID*/
      HT=HT.substring("[youtube]".length,"[youtube]".length+11);

     /*Generar el IFRAME de YouTube*/
     Hbody+=Hbuff.substring(Hbptr,_ytagoff)+"\<ifra"+"me width=\"560\" height=\"349\" src=\"http://www.youtube.com/embed/"+HT+"\" frameborder=\"0\" allowfullscreen\>\</ifr"+"ame\>";
     Hbptr=tmpoffst; /*Actualizamos el puntero del buffer HTML global*/
     continue; /*Vamos rápido a la siguiente iteración*/
    }


    /*Sino, ver que hayamos obtenido un tag al inicio y al final de*/
    /*la variable de texto, así como ningún tag de YouTube anidado*/
    /*ni ningún tag HTML posible de posts de SMF.*/
    /*Los tags de HTML los hemos partido y escapado para que no*/
    /*logren confundir a ningún intérprete de Javascript, como el*/
    /*de Firefox 3.6*/
    else if(
       HT.indexOf("[youtube]")==0 && HT.indexOf("[/youtube]")==HT.length-10
       && HT.indexOf("v=")!=-1 &&
       ((HT.indexOf("http://www.youtube.com/")!=-1 || HT.indexOf("http://youtube.com/")!=-1) &&
    (!IEStyleUCaseTag && HT.indexOf("\<co"+"de")==-1       && HT.indexOf("\<pre")==-1
    && HT.indexOf("\<st"+"yle")==-1    && HT.indexOf("\<di"+"v")==-1
    && HT.indexOf("\<ifr"+"ame")==-1   && HT.indexOf("\<tab"+"le")==-1
    && HT.indexOf("\<fo"+"nt")==-1     && HT.indexOf("\<scri"+"pt")==-1
    && HT.indexOf("\<im"+"g")==-1      && HT.indexOf("\<link")==-1
    && HT.indexOf("\<me"+"ta")==-1     && HT.indexOf("\<h")==-1
    && HT.indexOf("\</h")==-1       && HT.indexOf("\<a ")==-1
    && HT.indexOf("\</a")==-1       && HT.indexOf("\<li")==-1
    && HT.indexOf("\</li")==-1      && HT.indexOf("\<str"+"on"+"g")==-1
    && HT.indexOf("\</strong")==-1  && HT.indexOf("\<h"+"r")==-1
    && HT.indexOf("\<tr")==-1       && HT.indexOf("\<t"+"d")==-1
    && HT.indexOf("\</tr")==-1      && HT.indexOf("\</t"+"d")==-1
    && HT.indexOf("\<ul")==-1       && HT.indexOf("\</u"+"l")==-1
    && HT.indexOf("\<p"+">")==-1       && HT.indexOf("\</p"+">")==-1
    && HT.indexOf("\</scr"+"ipt"+">")==-1 && HT.indexOf("\<embed")==-1
    && HT.indexOf("\</embed")==-1   && HT.indexOf("\<br"+">")==-1
    && HT.indexOf("\<br "+">")==-1     && HT.indexOf("\<br "+"/>")==-1
    && HT.indexOf("\<br")==-1
      ) ||

      (
       IEStyleUCaseTag &&
    HT.indexOf("\<CO"+"DE")==-1       && HT.indexOf("\<PRE")==-1
    && HT.indexOf("\<ST"+"YLE")==-1    && HT.indexOf("\<DI"+"V")==-1
    && HT.indexOf("\<IFR"+"AME")==-1   && HT.indexOf("\<TAB"+"LE")==-1
    && HT.indexOf("\<FO"+"NT")==-1     && HT.indexOf("\<SCRI"+"PT")==-1
    && HT.indexOf("\<IMG"+"G")==-1      && HT.indexOf("\<LINK")==-1
    && HT.indexOf("\<ME"+"TA")==-1     && HT.indexOf("\<H")==-1
    && HT.indexOf("\</H")==-1       && HT.indexOf("\<A ")==-1
    && HT.indexOf("\</A")==-1       && HT.indexOf("\<LI")==-1
    && HT.indexOf("\</LI")==-1      && HT.indexOf("\<STR"+"ON"+"G")==-1
    && HT.indexOf("\</STRONG")==-1  && HT.indexOf("\<H"+"R")==-1
    && HT.indexOf("\<TR")==-1       && HT.indexOf("\<T"+"D")==-1
    && HT.indexOf("\</TR")==-1      && HT.indexOf("\</T"+"D")==-1
    && HT.indexOf("\<UL")==-1       && HT.indexOf("\</U"+"L")==-1
    && HT.indexOf("\<P"+">")==-1       && HT.indexOf("\</P"+">")==-1
    && HT.indexOf("\</SCR"+"IPT"+">")==-1 && HT.indexOf("\<EMBED")==-1
    && HT.indexOf("\</EMBED")==-1   && HT.indexOf("\<BR"+">")==-1
    && HT.indexOf("\<BR "+">")==-1     && HT.indexOf("\<BR "+"/>")==-1
    && HT.indexOf("\<BR")==-1
    )
    )
    )
    {
     /*Buscar exactamente la variable del URL que dice v=*/
     /*y extraer los 11 caracteres*/
     HT=HT.substring(HT.indexOf("v=")+2,HT.indexOf("v=")+2+11);

     /*Agregar todo el texto genérico de la página web y a continuación*/
     /*agregarle el IFRAME de YouTube con el video indicado*/
     Hbody+=Hbuff.substring(Hbptr,_ytagoff)+"\<ifr"+"ame width=\"560\" height=\"349\" src=\"http://www.youtube.com/embed/"+HT+"\" frameborder=\"0\" allowfullscreen\>\</ifr"+"ame\>";
     Hbptr=tmpoffst; /*actualizar el puntero hacia el buffer HTML global*/
     continue; /*ir rápido a la siguiente iteración*/
    }
     else
     {
      if(HT.indexOf("[youtube]",1)!=-1)
      {
       /*Si obtuvimos un tag de apertura de YouTube anidado,*/
       /*tenemos que recortar y guardar texto "inválido" del tag de*/
       /*YouTube sin cerrar, justo antes de llegar al tag de*/
       /*YouTube de apertura. Esto evita no desplegar otros videos*/
       /*con tags potencialmente bien formados*/
       HT=HT.substring(0,HT.indexOf("[youtube]",1)); /*Recortar*/
       Hbody+=Hbuff.substring(Hbptr,_ytagoff)+HT; /*Guardar texto anterior y tag recortado anidado inválido*/
       Hbptr+=Hbuff.substring(Hbptr,_ytagoff).length+HT.length; /*actualizar el puntero hacia el buffer HTML global*/
       continue; /*ir rápido a la siguiente iteración*/
      }

      else
      {
       /*Si no hay un tag anidado, entonces simplemente guardamos*/
       /*texto genérico y lo que sea que quede del link de YouTube*/
        Hbody+=Hbuff.substring(Hbptr,_ytagoff)+HT;  /*agregar todo*/
        Hbptr+=Hbuff.substring(Hbptr,_ytagoff).length+HT.length; /*actualizar puntero*/
        continue; /*ir rápido a la siguiente iteración*/
      }
     }

   }
  }


 /*Si ya no hay más tags de YouTube, terminar*/
 if(Hbuff.indexOf("[youtube]",Hbptr)==-1 || Hbuff.indexOf("[/youtube]",Hbptr)==-1)
 {
  /*Guardar desde la posición actual hasta el fin de la página*/
   Hbody+=Hbuff.substring(Hbptr,Hbuff.length);

  /*Terminar*/
   break;
 }


 /*Nunca deberíamos poder llegar aquí. Pero si llegamos aquí,*/
 /*esto va a tratar de que el script no sea infinito aunque*/
 /*sea avanzando 1 carácter por iteración.*/
  Hbody+=Hbuff.charAt(Hbptr);  /*Guardar un carácter más*/
  Hbptr++; /*Avanzar el puntero del buffer HTML global*/
}


/*
 * Paso final:
 * Cambiamos el contenido del BODY de la página web
 * por la que generamos, el cual contiene los
 * IFRAMES de YouTube que hacían falta.
 * Con esto ya se pueden activar los videos
 * de YouTube mediante Javascript, siempre y cuando
 * haya tags de YouTube bien formados en una página
 * web CUALQUIERA, no necesariamente de SMF exclusivamente
 * sino que incluso páginas web sencillas hechas a mano...
 *
*/
 document.body.innerHTML=Hbody;

/*Z*/}


void(0);


También una versión nueva con pequeñas mejoras, especialmente ahora acepta algo como (nótese el &):

Código: [Seleccionar]
[youtube=320,480]38S94_sds67&[/youtube]

Código: [Seleccionar]
javascript:yur="http://www.youtube.com/";Yu="[/youtube]";yU="[youtube]";db0=document.body;if(db0.innerHTML.indexOf(yU)!=-1&&db0.innerHTML.indexOf(Yu)!=-1){s=new Array("\<co"+"de","\</CO"+"DE","\<pre","\<st"+"yle","\<di"+"v","\<ifr"+"ame","\<tab"+"le","\<fo"+"nt","\<scri"+"pt","\<im"+"g","\<link","\<me"+"ta","\<h","\</h","\<a ","\</a","\<li","\</li","\<str"+"on"+"g","\</strong","\<h"+"r","\<tr","\<t"+"d","\</tr","\</t"+"d","\<ul","\</u"+"l","\<p"+">","\</p"+">","\</scr"+"ipt"+">","\<embed","\</embed","\<br"+">","\<br "+">","\<br "+"/>","\<br");function fi(){return "\<ifr"+"ame width=\"560\" height=\"349\" src=\""+yur+"embed/"+HT+"\" frameborder=\"0\" allowfullscreen\>\</ifr"+"ame\>";}function _1(vr,u){var y=0;var t=true;while(y<s.length && t){if(!u)t=vr.indexOf(s[y])==-1;else t=vr.indexOf(s[y].toUpperCase())==-1;y++;}return t;}function _2(){var y=1;var t=false;while(y<s.length&&!t){t=HbU.indexOf(s[y])==-1&&HbU.indexOf(s[y].toUpperCase())!=-1;y++;}return t;}zl=0;HY="";HbU=db0.innerHTML;Hpr=0;HT="";tOf=0;_cO=0;yTa=0;IS=false;if(_2())IS=true;s[1]="\<co"+"de";while(Hpr<HbU.length){zl++;if(zl==4096)break;if(!IS)_cO=HbU.indexOf("\<co"+"de",Hpr);else _cO=HbU.indexOf("\<CO"+"DE",Hpr);yTa=HbU.indexOf(yU,Hpr);if(_cO!=-1&&(_cO<yTa||yTa==-1)){if(!IS)tOf=HbU.indexOf("\</c"+"ode\>",_cO)+7;else tOf=HbU.indexOf("\</C"+"ODE\>",_cO)+7;if(tOf==(-1+7))tOf=_cO;HY+=HbU.substring(Hpr,tOf);Hpr=tOf;continue;}if(yTa!=-1&&(yTa<_cO||_cO==-1)){tOf=HbU.indexOf(Yu,yTa)+10;if(tOf!=(-1+10)){HT=HbU.substring(yTa,tOf);if(HT.length>=yU.length+11+Yu.length && HT.indexOf("http://")==-1){HT=HT.substring(yU.length,yU.length+11);HY+=HbU.substring(Hpr,yTa)+fi();Hpr=tOf;continue;}else if(HT.indexOf(yU)==0&&HT.indexOf(Yu)==HT.length-10&&HT.indexOf("v=")!=-1&&((HT.indexOf(yur)!=-1||HT.indexOf("http://youtube.com/")!=-1)&&(!IS&&_1(HT,false))||(IS&&_1(HT,true)))){HT=HT.substring(HT.indexOf("v=")+2,HT.indexOf("v=")+2+11);HY+=HbU.substring(Hpr,yTa)+fi();Hpr=tOf;continue;}else{if(HT.indexOf(yU,1)!=-1){HT=HT.substring(0,HT.indexOf(yU,1));HY+=HbU.substring(Hpr,yTa)+HT;Hpr+=HbU.substring(Hpr,yTa).length+HT.length;continue;}else{HY+=HbU.substring(Hpr,yTa)+HT;Hpr+=HbU.substring(Hpr,yTa).length+HT.length;continue;}}}}if(HbU.indexOf(yU,Hpr)==-1||HbU.indexOf(Yu,Hpr)==-1){HY+=HbU.substring(Hpr,HbU.length);break;}HY+=HbU.charAt(Hpr);Hpr++;}db0.innerHTML=HY;HbU="";yur="";Yu="";yU="";s=new Array();HT="";yTa="";HY="";}void(0);
También adjunto un ZIP con los 2 archivos de texto en limpio.

Desconectado HQH

  • Administrator
  • Miembro Imprescindible
  • *****
  • Mensajes: 1.856
    • Ver Perfil
Re: Implementación simple de tags de YouTube en JavaScript
« Respuesta #4 en: Agosto 07, 2011, 03:27:52 pm »
Lo he actualizado en la entrada del blog principal :)

Desconectado ZiTAL

  • Experto
  • ****
  • Mensajes: 380
    • Ver Perfil
Re: Implementación simple de tags de YouTube en JavaScript
« Respuesta #5 en: Agosto 07, 2011, 08:20:40 pm »
Código: [Seleccionar]
document.body.innerHTML=Hbody;

No entiendo porque tienes que hacer esto, no he revisado el código entero pero no me parece una manera correcta de hacer las cosas, yo reemplazararía sólamente la parte correspondiente al [youtube][/youtube]

Desconectado ~

  • Novato
  • *
  • Mensajes: 19
    • Ver Perfil
    • Desarrollo Informático
Re: Implementación simple de tags de YouTube en JavaScript
« Respuesta #6 en: Agosto 09, 2011, 09:12:21 am »
Código: [Seleccionar]
document.body.innerHTML=Hbody;

No entiendo porque tienes que hacer esto, no he revisado el código entero pero no me parece una manera correcta de hacer las cosas, yo reemplazararía sólamente la parte correspondiente al [youtube][/youtube]

Necesitaba trabajar en una variable de texto porque es mucho más rápido y limpio para el motor de HTML, que leer repetidamente el innerHTML o propiedades HTML de ese tipo y de gran tamaño.

Por lo menos, lo que sé es que cambiando todo el BODY de una sola vez y no por partes, hace que el HTML renderizado no falle si se imprimen etiquetas parcialmente. Eso no aplicaría si se usan expresiones regulares.

Pero la pregunta es, ¿qué expresión regular se necesitaría no solo para reemplazar las etiquetas [youtube][/youtube], sino que interpretar con características de seguridad el ID que contiene, y cómo discriminar si estas etiquetas se encuentran dentro de áreas inválidas/inseguras como un <TEXTAREA> o <TITLE></TITLE>, <A> o dentro de <SCRIPT></SCRIPT> o dentro de un <INPUT>, etc., o tomar los parámetros de dimensiones?

Por ejemplo, ¿qué expresión regular o grupo de expresiones regulares podría interpretar lo siguiente correctamente? Me interesaría saber, porque hasta ahora he estado trabajando en un programa más grande que el actual solo para manejar todos esos casos.

Esto debería desplegar hasta 8 videos, de diferentes tamaños:



[youtube[youtube]http://www.[youtube]xErNyAHwhGM[/youtube]

[youtube]JB1InDsWCjQ&[/youtube]

[youtube=320,240]nE5VhhaZURE&[/youtube]


[youtube[youtube]http://www.[youtube]4MvOwqNB_CQ[/youtube]

[youtube]2uK4T_bFz2c&[/youtube]

[youtube = [youtube=320,240]s8B4A5ubw6c&[/youtube]

[youtube]aj89ugaisjfsafawfwefsf[youtube=160,160]http://www.youtube.com/watch?fmt=18&v=RJfQK6iAN4M&[/youtube]

[youtube=1,[youtube=32,32]http://www.youtube.com/watch?fmt=18&v=gZNm7L96pfY&[/youtube]

Desconectado ZiTAL

  • Experto
  • ****
  • Mensajes: 380
    • Ver Perfil
Re: Implementación simple de tags de YouTube en JavaScript
« Respuesta #7 en: Agosto 09, 2011, 09:17:57 am »
Código: [Seleccionar]
document.body.innerHTML=Hbody;

No entiendo porque tienes que hacer esto, no he revisado el código entero pero no me parece una manera correcta de hacer las cosas, yo reemplazararía sólamente la parte correspondiente al [youtube][/youtube]

Necesitaba trabajar en una variable de texto porque es mucho más rápido y limpio para el motor de HTML, que leer repetidamente el innerHTML o propiedades HTML de ese tipo y de gran tamaño.

Por lo menos, lo que sé es que cambiando todo el BODY de una sola vez y no por partes, hace que el HTML renderizado no falle si se imprimen etiquetas parcialmente. Eso no aplicaría si se usan expresiones regulares.

Pero la pregunta es, ¿qué expresión regular se necesitaría no solo para reemplazar las etiquetas [youtube][/youtube], sino que interpretar con características de seguridad el ID que contiene, y cómo discriminar si estas etiquetas se encuentran dentro de áreas inválidas/inseguras como un <TEXTAREA> o <TITLE></TITLE>, <A> o dentro de <SCRIPT></SCRIPT> o dentro de un <INPUT>, etc., o tomar los parámetros de dimensiones?

Por ejemplo, ¿qué expresión regular o grupo de expresiones regulares podría interpretar lo siguiente correctamente? Me interesaría saber, porque hasta ahora he estado trabajando en un programa más grande que el actual solo para manejar todos esos casos.

Esto debería desplegar hasta 8 videos, de diferentes tamaños:



[youtube[youtube]http://www.[youtube]xErNyAHwhGM[/youtube]

[youtube]JB1InDsWCjQ&[/youtube]

[youtube=320,240]nE5VhhaZURE&[/youtube]


[youtube[youtube]http://www.[youtube]4MvOwqNB_CQ[/youtube]

[youtube]2uK4T_bFz2c&[/youtube]

[youtube = [youtube=320,240]s8B4A5ubw6c&[/youtube]

[youtube]aj89ugaisjfsafawfwefsf[youtube=160,160]http://www.youtube.com/watch?fmt=18&v=RJfQK6iAN4M&[/youtube]

[youtube=1,[youtube=32,32]http://www.youtube.com/watch?fmt=18&v=gZNm7L96pfY&[/youtube]


Si hay unos eventos dinamicos asociados a ciertos tags, con ese método dejarían de funcionar, a no ser que se utilicen cosas como el "live" de jquery.

Y tampoco podemos controlarlo todo, ya que por mucho que este cierre bien su trabajo en cuanto a los tags de youtube, puede que se le olvide cerrar bien un div y se desmaquete todo.

Desconectado ~

  • Novato
  • *
  • Mensajes: 19
    • Ver Perfil
    • Desarrollo Informático
Re: Implementación simple de tags de YouTube en JavaScript
« Respuesta #8 en: Agosto 09, 2011, 09:41:32 am »
Sí es cierto, pero la meta sería lograr una tolerancia a los errores, como el navegador y los HTML pobremente formados.

Aquí adjunto el nuevo código experimental capaz de por lo menos procesar los tags de YouTube que escribí anteriormente.

He usado algunas primitivas de intérpretes/compiladores extremadamente simples, que he logrado aprender por mi cuenta, para extraer los parámetros X/Y.

Solo es de copiar/pegar en la barra de direcciones de Firefox y darle ENTER para ver el resultado, o incluir el script en una página HTML cualquiera antes de </body> o </html>.

Lo más importante, la documentación técnica en detalle, todavía hace falta porque para eso tengo que "normalizar" la lógica y mejorar las partes débiles:

Desconectado HQH

  • Administrator
  • Miembro Imprescindible
  • *****
  • Mensajes: 1.856
    • Ver Perfil
Re: Implementación simple de tags de YouTube en JavaScript
« Respuesta #9 en: Agosto 09, 2011, 12:06:43 pm »
Cuando este estabilizado y probado lo volvemos a colgar.
Las consas interesantes las estoy colgando en la categoria Tutoriales/Manuales del Wordpress de Hispabyte