Después de pasar bastante tiempo buscando un HTML Sanitizer simple y (suspiro...) no dependiente de Node.js sin suerte, de los que encontré, a menudo convertían < y > en sus respectivas entidades (dejando la entrada incluso más sucio) o luego eliminaron toda la etiqueta y su contenido (que no es lo que estoy buscando), decidí simplemente eliminar las etiquetas no deseadas, permitiendo solo aquellas de un subconjunto muy específico y encontré esta respuesta :
const VALID_TAGS = [ 'b', 'strong', 'i', 'em', 's', 'a', 'img', 'blockquote', 'ul', 'li' ]; $("#text *").not( VALID_TAGS.join( ',' ) ).each(function() { var content = $(this).contents(); $(this).replaceWith(content); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="text"> <blockquote> <p>Lorem ipsum dolor...</p> <footer> By <a href="https://www.github.com/someuser"><strong>Some User</strong></a> in March, 13 </footer> </blockquote> </div>Funciona a la perfección para mis necesidades, sin embargo, se basa en jQuery para hacer el trabajo.
¿Cómo podría lograr lo mismo sin él -Y- de una cadena, no de un selector o elemento listo para usar?
Esto es meramente para mostrar. NO estoy desinfectando o, mejor dicho, filtrando el HTML para usarlo "tal cual" en el lado del servidor;)
querySelectorAll, un bucle y replaceWith
const VALID_TAGS = [ 'b', 'strong', 'i', 'em', 's', 'a', 'img', 'blockquote', 'ul', 'li' ]; document.querySelectorAll("#text *").forEach(elem => { if (!VALID_TAGS.includes(elem.tagName.toLowerCase())) { elem.replaceWith(...elem.childNodes); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="text"> <blockquote> <p>Lorem ipsum dolor...</p> <footer> By <a href="https://www.github.com/someuser"><strong>Some User</strong></a> in March, 13 </footer> </blockquote> </div>Si la cadena, puede usar el analizador DOM para obtenerlo como HTML
const parser = new DOMParser(); const htmlDoc = parser.parseFromString(txt, 'text/html');Si está en el servidor, necesita usar una biblioteca
Bueno, puede que no sea la mejor manera de hacerlo, pero después de mucho pensar e investigar logré hacer el trabajo con un simple Regex, hasta que alguien aparece con un ejemplo completo de cómo hacerlo mejor:
const text = `<div id="text"> <blockquote> <p>Lorem ipsum dolor...</p> <footer> By <a href="https://www.github.com/someuser"><strong>Some User</strong></a> in March, 13 </footer> </blockquote> </div>`; const VALID_TAGS = [ 'b', 'strong', 'i', 'em', 's', 'a', 'img', 'blockquote', 'ul', 'li' ]; function stripTags( input, allowed ) { return input.replace( new RegExp( `\\s*<(?!\/?\\b(${allowed.join('|')})\\b)[^>]+>\\s*`, 'gmi' ), ''); } console.log( stripTags( text, VALID_TAGS ).trim().replace(/(\r\n|\n|\r)/gm, '' ).replace( /\s{2,}/gm, ' ' ) )