¿jQuery quita algunos elementos html de una cadena cuando usa .html()?

Tengo una var que contiene una página html completa, incluyendo la cabeza, html, cuerpo, etc. Cuando paso esa cadena en la función .html(), jQuery quita todos los elementos, como cuerpo, html, cabeza , etc., que no quiero¿jQuery quita algunos elementos html de una cadena cuando usa .html()?

Mi var data contiene:

<html> 
<head> 
<title>Untitled Document</title> 
</head> 
<body> 
</body> 
</html>

Entonces mi jQuery es:

// data is a full html document string 
data = $('<div/>').html(data); 
// jQuery stips my document string! 
alert(data.find('head').html());

estoy necesitando para manipular una cadena página HTML completa, de modo que pueda devolver lo que se encuentra en el elemento. Me gustaría hacer esto con jQuery, pero parece que todos los métodos, append(), prepend() y html() intentan convertir la cadena a elementos dom, que eliminan todas las otras partes de una página html completa.

¿Hay alguna otra manera en que pueda hacer esto? Estaría bien usando otro método. Mi objetivo final es encontrar ciertos elementos dentro de mi cadena, así que pensé que jQuery sería lo mejor, ya que estoy tan acostumbrado. Pero, si va a recortar y eliminar partes de mi cuerda, voy a tener que buscar otro método.

Ideas?

Fuente

2010-03-21 Nic Hubbard

¿Por qué alguien menospreció esto? –

No es broma, creo que esta es una buena discusión sobre algo que muchos usuarios se preguntan. –

Después de algunas pruebas rápidas, me parece que este comportamiento no es causado por jQuery sino por el navegador.

Como se puede comprobar fácilmente a sí mismo (DEMO http://jsbin.com/ocupa3)

var data = "<html><head><title>Untitled Document</title></head><body><p>test</p></body></html>"; 
data = $('<div/>').html(data); 
alert(data.html());

produce resultados diferentes en distintos navegadores

Opera 10,10

<HEAD><TITLE>Untitled Document</TITLE></HEAD><P>test</P>

FF 3,6

<title>Untitled Document</title><p>test</p>

IE6

<P>test</P>

por lo que este no tiene nada que ver con jQuery, son los navegadores cuya tira algunas etiquetas al insertar una cadena HTML entera dentro de un div. Pero necesitaría pasar por todo el código jQuery para html() para estar seguro. Y tendría que hacer eso para todos los navegadores, ya que hay varias formas diferentes en que jQuery intenta hacer su trabajo.

Para una solución os aconsejo para investigar el uso de un iframe (posiblemente ocultos) y para establecer que el contenido de iframe para el html-secuencia que tiene. Pero tenga en cuenta que jugar con iframes y cambiar su contenido programáticamente tampoco es una tarea fácil. También hay diferentes caprichos relacionados con el navegador y problemas de tiempo involucrados.

Fuente

2010-03-21 23:42:51 jitter

Gracias por investigar esto, agradezco el análisis completo de esto. Creo que mi solución a esto podría ser una expresión regular que pueda buscar en mi cadena un elemento específico. –

Me sorprendió descubrir esta limitación. Aquí hay una solución que funciona (agrega con éxito todo el código html, incluido el cuerpo de la cabeza, etc.): mydoc = document.getElementById ('iframe_id'). ContentWindow.document; mydoc.write (html_code); mydoc.close(); –

No es necesario que el contenedor div.

¿Has probado esto ?:

var foo = $(data); // data is your full html document string

Ahora tiene que buscar dentro de ella, así:

$('.someClass', foo); // foo is the document you created earlier

Actualización:

Como otro respondió mencionado, cómo esto actuar se reduce al navegador.

Miré el jQuery docs un poco y encontré esto:

Cuando el HTML es más complejo que una sola etiqueta sin atributos, ya que es en el ejemplo anterior, el creación real de la elementos es manejado por el mecanismo innerHTML del navegador. Específicamente, jQuery crea un nuevo elemento <div> y establece el innerHTML propiedad del elemento al fragmento HTML que fue aprobada en.

Así que parece que cuando se utiliza un documento HTML entera como una cadena , no es diferente de configurar la propiedad innerHTML de div que hace usando createElement.

Fuente

2010-03-21 21:45:16

'$ ('')' provoca una docena de errores JS, al menos en Chrome. –

Eso no parece funcionar. Intenté alertar $ ('head', data) .html() pero eso solo devuelve null. –

@Max para mí no da ningún error, solo recupero un objeto vacío (en Chrome). Eso es extraño, había probado '$ ('')' que funciona muy bien. –

No, la función jQuery html solo envía la cadena a la propiedad innerHTML del elemento, que es una función del navegador que le dice que analice el HTML en elementos DOM y los agregue a la página.

Su navegador no funciona con una página como datos HTML, funciona como DOM e importa/exporta HTML.

JavaScript tiene muy buena Regular Expression support. Dependiendo de la complejidad de su tarea, puede encontrar que esta es la mejor forma de procesar sus datos.

Fuente

2010-03-21 23:54:34

Aquí hay una solución, que incluirá el cuerpo, la cabeza y otros atributos: mydoc = document.getElementById ('NAME_OF_PREVIEW_FRAME'). ContentWindow.document; mydoc.write (HTML_CODE); mydoc.close();

Fuente

2012-12-17 02:45:48

salvador, gracias. – TheNastyOne

¿jQuery quita algunos elementos html de una cadena cuando usa .html()?

Respuesta

Cuestiones relacionadas