Jquery: Tira todas las etiquetas HTML específicas de cadena

Question

que tienen una variable que contiene una cadena de texto y etiquetas HTML, como:

var temp = "<div>Some text</div><p>More text<span>here</span></p><p>Even more</p>"; 

Me gustaría eliminar todas las etiquetas de un tipo determinado. Digamos todas las etiquetas p y span por ejemplo.

Esto es lo mejor que puedo llegar a:

var temp = "<div>Some text</div><p>More text<span>here</span></p><p>Even more</p>"; 
var $temp = $(temp); 
$("p", $temp).replaceWith("foo"); 
alert($temp.html()); //returns "Some text" 

La respuesta más cercano que pude encontrar es esta respuesta por Nick Craver: strip span tags from string with jquery.

Answer 1

Demostración: http://jsfiddle.net/VwTHF/1/

$('span, p').contents().unwrap(); 

.contents() obtendrán los elementos y el texto dentro de cada una de dichas etiquetas, y .unwrap eliminará el elemento envolviendo cada sección de contenido.

Sobre la base de su enfoque actual se vería algo como esto:

var temp = "<div>Some text</div><p>More text<span>here</span></p><p>Even more</p>"; 
var $temp = $(temp); 
$temp.find('span, p').contents().unwrap().end().end(); 

Si desea continuar con la orientación del objeto original, usted tiene que utilizar .end() para limpiar el filtro.

Answer 2

Puede probar el jquery plugin HTML Clean. En el ejemplo que proporcionan:

$.htmlClean("<H1 class=\"header\"><P>Nested P Test</H1>", {format:true}); 

=> 
<h1> 
     Nested P Test 
</h1> 

Puede reemplazar las etiquetas específicas con {removeTags:[p]} y de él todavía representar los contenidos simplemente no la etiqueta.

Answer 3

Tuve que hacer algo similar: mantener un bloque de texto que contenga cualquier etiqueta HTML que no sea <b>, <i> o <u>. Esta pregunta y varias otras me señalaron mi propia función:

function cleanNonFormattingTags(htmlContents) { 
    if (htmlContents && htmlContents.length) { 
     var result = ''; 
     htmlContents.each(function() { 
      var $child = $(this), type = $child.prop('tagName'), isTextNode = this.nodeName == "#text"; 
      if (isTextNode) { 
       result += this.textContent; 
      } 
      else if (type == 'B' || type == 'U' || type == 'I' || type == 'BR') { // Allow only these types of tags 
       var innerContent = cleanNonFormattingTags($child.contents()); 
       var $newTag = $(document.createElement(type)).html(innerContent); 
       result += $newTag[0].outerHTML; 
      } 
      else { 
       result += cleanNonFormattingTags($child.contents()); 
      } 
     }); 
     return result; 
    } 
    return htmlContents.text(); 
} 

Espero que esto ayude!

Answer 4

Haré un seguimiento en @nbrooks porque su respuesta es muy similar a la que desea, pero no del todo. @nbrooks acerta en la solución al notar que html() le da los datos que están envueltos en una etiqueta. La solución, por lo tanto, es envolver su HTML en una etiqueta. Esto debería hacer el truco para usted:

var temp = "<div>Some text</div><p>More text<span>here</span></p><p>Even more</p>"; 
$("<span>" + temp + "</span>").find('span,p'). 
    contents().unwrap().end().end().html()` 

Ver http://jsfiddle.net/18u5Ld9g/1/ para un ejemplo.

Como una función más general:

function stripTags(html, tags) { 
    // Tags must be given in CSS selector format 
    return $("<span>" + html + "</span>").find(tags). 
    contents().unwrap().end().end().html(); 
}