sábado, 16 de marzo de 2013

Javascript - Cómo obtener un elemento específico del DOM donde la fuente es una cadena

Tenemos en una variable una cadena de un documento HTML o en un servicio que devuelve un string de html y queremos filtrarlo solo para obtener únicamente el contenido del elemento HEAD, podemos aplicar el siguiente script:

var head = txt.split("<head")[1]
              .split(">")
              .slice(1)
              .join(">")
              .split("</head>")[0];


O por ejemplo para obtener el contenido del elemento body:

var body = txt.split("<body")[1]
              .split(">")
              .slice(1)
              .join(">")
              .split("</body>")[0];


Lo mismo pero utilizando expresiones regulares:
var head = txt.match(/<(.*|\n*|\t*|(\r\n)*)head(.*|\n*|\t*|(\r\n)*)>
                      (.|\n|\t|\r\n)*<(.*|\n*|\t*|(\r\n)*)\/(.*|\n*|\t*
                      |(\r\n)*)head(.*|\n*|\t*|(\r\n)*)>$/gim);

var body = txt.match(/<(.*|\n*|\t*|(\r\n)*)body(.*|\n*|\t*|(\r\n)*)>
                      (.|\n|\t|\r\n)*<(.*|\n*|\t*|(\r\n)*)\/(.*|\n*|\t*
                      |(\r\n)*)body(.*|\n*|\t*|(\r\n)*)>$/gim);


Es mejor usar la expresión regular ya que en los flags se indica case-insensitive.

Ahora podemos llenar las dos secciones de un iframe, tanto el head como el body con un string de tipo HTML:

$('#myIframe').contents().find('head').html(head); $('#myIframe').contents().find('body').html(body);