¿Cómo extraer el contenido de las etiquetas html de una cadena usando javascript o jquery?

Tal vez esto es muy básico, pero estoy confundido. Tengo una página html simple con muchas secciones (div). Tengo una cadena que contiene etiquetas html en javascript. El código es el siguiente:¿Cómo extraer el contenido de las etiquetas html de una cadena usando javascript o jquery?

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script type="text/javascript"> 
var str1="<html><body><div id='item1'><h2>This is a heading1</h2><p>This is a paragraph1.</p></div><div id='item2'><h2>This is a heading2</h2><p>This is another paragraph.</p></div><div id='lastdiv'>last</div></body></html>"; 
</script> 
</head> 
<body> 
<div id="title1"></div> 
<div id="new1"></div> 
<div id="title2"></div> 
<div id="new2"></div> 
</body> 
</html>

que desea extraer el contenido de las etiquetas HTML (de la cadena en javascript) y mostrar que el contenido en mi página HTML en las secciones deseadas.

es decir, quiero que "Este es un encabezado1" que se muestra en <div id="title1"> y "Esto es un párrafo1". para que se muestre en <div id="new1"> y lo mismo para el segundo par de etiquetas.

Necesito todo esto para trabajar solo en el lado del cliente. He intentado usar el método HTML DOM getElementByTagName y se está volviendo demasiado complicado. Sé muy poco de jquery. Y estoy confundido No entiendo cómo hacerlo. ¿Puede guiarme sobre qué usar, javascript o jquery y cómo usarlo? ¿Hay alguna forma de identificarlo desde la cadena e iterar a través de él?

Cómo extraer "This is heading1" (y contenidos similares incluidos en las etiquetas html) de str1 ?? No sé el índice de estos por lo tanto, no puede usar la función substr() o substring() en javascript.

Fuente

2012-02-08 user1196522

Usando .text() tanto como 'captador' y un 'colocador' sólo podemos repetir el patrón de:

objetivo del elemento de la página que deseamos llenar
darle un contenido de la cadena

jsFiddle

<script type="text/javascript"> 
var str1="<html><body><div id='item1'><h2>This is a heading1</h2><p>This is a paragraph1.</p></div><div id='item2'><h2>This is a heading2</h2><p>This is another paragraph.</p></div><div id='lastdiv'>last</div></body></html>"; 
$(function(){ 
    var $str1 = $(str1);//this turns your string into real html 

    //target something, fill it with something from the string 
    $('#title1').text($str1.find('h2').eq(0).text()); 
    $('#new1').text($str1.find('p').eq(1).text()); 
    $('#title2').text($str1.find('h2').eq(1).text()); 
    $('#new2').text($str1.find('p').eq(1).text()); 
}) 
</script>

Fuente

2012-02-08 07:41:03 Sinetheta

Thnks .. Funcionó .. – user1196522

Bueno,

En primer lugar se debe aclarar la forma en que está recibiendo el código fuente HTML de su propio código HTML. Si usa Ajax, debe marcar la fuente como html, incluso xml.

Fuente

2012-02-08 07:37:31

document.getElementById ('{ID del elemento}') innerHtml

si el uso de jQuery $ ('selector') html()..;

<div id="test">hilo</div> 
<script> 
alert($('#test').html()); 
<script>

Fuente

2012-02-08 07:37:47 Leon

déjame aclarar mi respuesta con el conocimiento de que no creo que entiendo perfectamente lo que quiere hacer ... sin embargo yo creo desea reemplazar algunos (aunque lo haces sonar como todos) html con alguna fuente de datos.

he manipulado un ejemplo sencillo es jsFiddle aquí:

http://jsfiddle.net/rS2Wt/9/

Esto hace un simple reemplazar el uso de jQuery en un div objetivo.

Espero que esto ayude, buena suerte.

Fuente

2012-02-08 07:42:19 OnResolve

en mi humilde opinión, Usted puede hacer esto en jQuery en dos pasos:

Paso 1) analizar la cadena en un documento XML/HTML.

Hay al menos dos maneras de hacer esto:

a) Según lo mencionado por Sinetheta

var htmlString = "<html><div></div></html>"; 
var $htmlDoc = $(htmlString);

b) El uso de parseXML

var htmlString = "<html><div></div></html>"; 
var htmlDoc = $.parseXML(htmlString); 
var $htmlDoc = $(htmlDoc);

Por favor refiérase http://api.jquery.com/jQuery.parseXML/

Paso 2) Seleccione t ext del documento XML/HTML.

var text = $htmlDoc.text(jquery_selector);

Consulte http://api.jquery.com/text/

Fuente

2012-02-08 07:49:04 fizzbuzz

¿Cómo extraer el contenido de las etiquetas html de una cadena usando javascript o jquery?

Respuesta

Cuestiones relacionadas