从字符串中解析 html 标签并在 javaScript、vue.js 中创建一个数组

Question

我正在尝试从字符串创建一个数组。字符串包含 HTML tags 像 P, span, a ,img。有些嵌套在 span 标签内 p，img 标签内 a 等。我不会替换任何 tags 或 styles。我正在尝试解析所有标签并制作一个数组。

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

我正在尝试使数组看起来像这样... 来自 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>'
]

Answer 1

这很难或不可能单独使用正则表达式（取决于您 want/need 允许的 HTML 的复杂性）。您可以使用 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>

从字符串中解析 html 标签并在 javaScript、vue.js 中创建一个数组

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

javascript

css

vuejs2

vuejs3