2

¡Buenos días! El objeto me devuelve la cadena que muestro abajo y me gustaría eliminar todos los tag de HTML, así como #html-body [data....] {just...}

<style>#html-body [data-pb-style=XV6R274]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;border-style:none;border-width:1px;border-radius:0;margin:0 0 10px;padding:10px}#html-body [data-pb-style=YJCQDA4]{border-style:none;border-width:1px;border-radius:0;margin:0;padding:0}</style><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="XV6R274"><div data-content-type="html" data-appearance="default" data-element="main" data-pb-style="YJCQDA4">Las adidas Ultra Boost son unas zapatillas de running de alto rendimiento lanzadas al mercado en 2015. Gracias al tejido Primeknit y la tecnología BOOST™, ofrecen un ajuste ligero y flexible, así como una gran amortiguación y un excelente retorno de energía en cada zancada.</div></div></div>

Actualmente lo tengo montado así.

const result = data.category.description
const regex = /(<([^>]+)>)/ig;
setResultSubtitle(result ? result.replace(regex, "") : '');

Pero regex no me consigue eliminar los claves #html-body [data....] {just...} Debería de quedar así

Las adidas Ultra Boost son unas zapatillas de running de alto rendimiento lanzadas al mercado en 2015. Gracias al tejido Primeknit y la tecnología BOOST™, ofrecen un ajuste ligero y flexible, así como una gran amortiguación y un excelente retorno de energía en cada zancada.

¿Alguien qué pueda ayudarme?

3
  • ¡Esta pregunta es un clásico! stackoverflow.com/questions/1732348/… Commented el 3 nov. 2022 a las 11:35
  • Todos hemos pasado alguna vez por algo así :-)
    – JadrDev
    Commented el 3 nov. 2022 a las 11:37
  • Por cierto, bienvenido a SOes, puedes completar el recorrido de bienvenida para ganarte tu primera medalla y conocer un poco mejor el sitio y su temática, aunque tu primera pregunta está bien planteada y expresada. Commented el 3 nov. 2022 a las 11:49

2 respuestas 2

3

No puedes usar expresiones regulares para parsear HTML porque HTML no es un lenguage regular.

Puedes parsear el HTML y obtener el elemento que quieres creando un documento y usando los métodos clásicos para navegar por el DOM:

const texto ='<style>#html-body [data-pb-style=XV6R274]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;border-style:none;border-width:1px;border-radius:0;margin:0 0 10px;padding:10px}#html-body [data-pb-style=YJCQDA4]{border-style:none;border-width:1px;border-radius:0;margin:0;padding:0}</style><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="XV6R274"><div data-content-type="html" data-appearance="default" data-element="main" data-pb-style="YJCQDA4">Las adidas Ultra Boost son unas zapatillas de running de alto rendimiento lanzadas al mercado en 2015. Gracias al tejido Primeknit y la tecnología BOOST™, ofrecen un ajuste ligero y flexible, así como una gran amortiguación y un excelente retorno de energía en cada zancada.</div></div></div>';

const parser = new DOMParser();

const documento = parser.parseFromString(texto,'text/html');
//documento es un HTMLDocument, con lo que podemos usar el API del DOM:
console.log(documento.querySelector('div[data-content-type=html]').innerHTML)

6
  • En React Native, no puedo usar el DOMParser ¿Cómo podría hacerlo?
    – JadrDev
    Commented el 3 nov. 2022 a las 11:53
  • Siempre hay una librería para resolver cualquier problema: npmjs.com/package/react-native-dom-parser, o npmjs.com/package/react-native-html-parser Commented el 3 nov. 2022 a las 11:55
  • No me sirve ninguna, con ambas parece meterle más código
    – JadrDev
    Commented el 3 nov. 2022 a las 12:04
  • ¿Qué quieres decir? La segunda opción parece sencilla: var DomParser = require('react-native-html-parser').DOMParser; let doc = new DomParser().parseFromString(html,'text/html'); Commented el 3 nov. 2022 a las 13:40
  • Es sencilla de implementar, el problema es no me saca el string solamente.
    – JadrDev
    Commented el 3 nov. 2022 a las 13:52
0

Al final lo he resuelto así

const regexHtml = /<(?:..|\n)*?>/gm;
setResultSubtitle(result ? result.replace(regexHtml, "") : "");

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.