parse html tags from string and make an array in javaScript, vue.js

Question

I am trying to make an array from string. the string contains HTML tags like P, span, a,img. some are nested like span tag inside p, img tag inside a etc. i would not replace any tags or styles. I am trying to parse all the tags and make an array.

Example code looks like this in textData variable

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;
}

I am trying to make an array look like this... from 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>'
]

Vitaliy Rayets · Accepted Answer · 2021-10-26 11:13:24Z

1

This is hard or impossible to do with regexp alone (depending on the complexity of HTML that you want/need to allow). You can use split-html.

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

edited Oct 26, 2021 at 11:13

answered Oct 26, 2021 at 10:54

Vitaliy Rayets

2,4041 gold badge8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

parse html tags from string and make an array in javaScript, vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related