Title rewritten to: "Filter script tags into array"

Question

I have a sample tag:

<p><span style="color: blue;">现在是这个</span></p>
<p><br></p>
<p>主要配置值是这个</p>
<p><br></p>
<p>!</p>
<p>启用</p>
<p>配置终端</p>
<p>服务器名称 <span style="color: red;">服务器名称</span></p>
<p>启用密码 <span style="color: red;">服务器密码</span></p>
<p>禁用域名查找</p>
<p>IP域名 <span style="color: red;">地区</span>.google.com</p>
<p>!</p>
<p><br></p>

I want to write a JavaScript code that filters all span tag data into two different arrays. One is used when the color is red and the other is used when the color is blue. But I can't do it, can someone help me? I'm trying to write JS code but my solution fails.

Answer 1

You can simply use regular expressions and match() to get the elements

const html = `<p><span style="color: blue;">是这个了</span></p>
<p><br></p>
<p>主要配置值是这个</p>
<p><br></p>
<p>!</p>
<p>启用</p>
<p>配置终端</p>
<p>服务器名称<span style="color: red;">服务器名称</span></p>
<p>启用密码<span style="color: red;">服务器密码</span></p>
<p>禁用IP域名解析</p>
<p>IP域名<span style="color: red;">区域</span>.google.com</p>
<p>!</p>
<p><br></p>`

const blueArray = html.match(/(?<=<span style="color: blue;">)(.*?)(?=<\/span>)/g)

console.log(blueArray)

const redArray = html.match(/(?<=<span style="color: red;">)(.*?)(?=<\/span>)/g)

console.log(redArray)