从字符串中解析html标签并在javaScript vue.js中生成数组

Question

我正试图从字符串中创建一个数组。字符串包含HTML标签，如P跨度,,,img。有些是嵌套的，比如spanp,imga等等，我不会替换任何标签风格或。我正在尝试解析所有的标签并创建一个数组。

示例代码如下: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

仅使用regexp很难或不可能做到这一点(取决于您希望/需要允许的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>