Estoy tratando de hacer una matriz a partir de una cadena. la cadena contiene etiquetas HTML como P , span , a , img . algunos están anidados como la etiqueta span dentro de p , la etiqueta img dentro de a, etc. No reemplazaría ninguna etiqueta o estilo . Estoy tratando de analizar todas las etiquetas y hacer una matriz.
El código de ejemplo se ve así en la variable textData
var line_array =[]; var textData : ` <img src="imgurl" alt="" /> <p>some text</p> <p style="cssStyle">some text</p> <span style="cssStyle"> some text </span> <p style="cssStyle">some text<span style="cssStyle"> span text </span></p> <a href=""><span style="style">text</span><img src="https://via.placeholder.com/100" alt=""/> </a> ` activate: function (){ let sourceText = document.getElementById('sourceText').innerHTML; line_array = sourceText; }Estoy tratando de hacer que una matriz se vea así ... de textData
line_array =[ '<img src="imgurl" alt="" />', '<p>some text</p>', '<p style="cssStyle">some text</p>', '<span style="cssStyle"> some text </span>', '<p style="cssStyle">some text<span style="cssStyle"> span text </span</p>', '<a href=""><span style="style">text</span><img src="imgurl" alt=""/></a>' ]Esto es difícil o imposible de hacer solo con expresiones regulares (dependiendo de la complejidad del HTML que desee/necesite permitir). Puedes usar split-html .
<script src="https://cdn.jsdelivr.net/npm/split-html@1.1.0/index.min.js"></script> <script> const textData = ` <img src="imgurl" alt="" /> <p>some text</p> <p style="cssStyle">some text</p> <span style="cssStyle"> some text </span> <p style="cssStyle">some text<span style="cssStyle"> span text </span></p> <a href=""><span style="style">text</span><img src="https://via.placeholder.com/100" alt=""/> </a> ` const line_array = splitHtml(textData, 'img, a, p').filter(String); console.log(line_array); </script>