Estoy tratando de extraer texto de una cadena html pero no funciona como se esperaba.
La cadena html que tengo es,
<div data-content-type="html" data-appearance="default" data-element="main"><p>The Angelina Tank Dress is simple yet sophisticated. This dress can be thrown over a swimsuit for last minute lunch plans or belted for dinner on the patio. The high-low hemline gives it the perfect amount of swing. </p><p>Features:</p><ul><li>Scoopneck</li><li>Sleeveless</li><li>Hits below the knee</li><li>Longer back hemline</li><li>Machine wash, tumble dry low</li></ul></div>Hay un texto de descripción y texto dentro de los elementos ul li. ¿Cómo podría extraer todo ese texto por separado? Por ejemplo, extraiga el texto de la descripción por separado y el texto dentro de los elementos li por separado.
Lo intenté
const productDescription = productDetails.description.replace(/<div>|<\/div>|<ul>|<li>/g, "").trim().split("Features:");Me gustaría que el texto fuera
El vestido sin mangas Angelina es simple pero sofisticado. Este vestido se puede poner sobre un traje de baño para planes de almuerzo de última hora o ceñido con cinturón para cenar en el patio. El dobladillo alto y bajo le da la cantidad perfecta de swing.
Escote redondo Sin mangas Hasta debajo de la rodilla Dobladillo trasero más largo Lavar a máquina, secar en secadora a temperatura baja
querySelectorAll para buscar todos los elementos p y li .map ).type y text . const html = document.querySelector('div').textContent; const div = document.createElement('div'); div.innerHTML = html; const els = div.querySelectorAll('p, li'); const arr = Array.from(els).map(el => { const type = el.nodeName === 'P' ? 'para' : 'item'; return { type, text: el.textContent } }); console.log(arr); <div data-content-type="html" data-appearance="default" data-element="main"><p>The Angelina Tank Dress is simple yet sophisticated. This dress can be thrown over a swimsuit for last minute lunch plans or belted for dinner on the patio. The high-low hemline gives it the perfect amount of swing. </p><p>Features:</p><ul><li>Scoopneck</li><li>Sleeveless</li><li>Hits below the knee</li><li>Longer back hemline</li><li>Machine wash, tumble dry low</li></ul></div><script> function stripHtml(html) { var textarea = document.createElement("textarea"); textarea.innerHTML = html; var temporalDivElement = document.createElement("p"); temporalDivElement.innerHTML = textarea.value; return temporalDivElement.textContent || temporalDivElement.innerText || ""; } var htmlString = `<div data-content-type="html" data-appearance="default " data-element="main"><p>The Angelina Tank Dress is simple yet sophisticated. This dress can be thrown over a swimsuit for last minute lunch plans or belted for dinner on the patio. The high-low hemline gives it the perfect amount of swing. </p><p>Features:</p><ul><li>Scoopneck</li><li>Sleeveless</li><li>Hits below the knee</li><li>Longer back hemline</li><li>Machine wash, tumble dry low</li></ul></div>`; console.log(stripHtml(htmlString)); </script>