Javascript 在字符串中查找多个值并保存到数组？

Question

我试图找到一种方法从这个字符串中获取值：Edges</label><div><div class="edges_and_corners_container"><div class="color-cont"><img class="color-img" src="img/tiles/light.png" style="background-color: rgb(226, 84, 153);"></div><div class="report_color_container"><i>Carnival Pink: </i>7</div></div><div class="edges_and_corners_container"><div class="color-cont"><img class="color-img" src="img/tiles/light.png" style="background-color: rgb(103, 66, 48);"></div><div class="report_color_container"><i>Chocolate Brown: </i>5</div></div></div></div><div><hr><label>我需要找到一种方法从这个字符串中获取颜色“Carnival Pink”和“Chocolate Brown”并将它们添加到数组中。该字符串存储在一个变量中。我将上面的这个字符串放入一个 var 中：var edgesSubString = slb_report_raw.substring(    slb_report_raw.lastIndexOf("Edges"),     slb_report_raw.lastIndexOf("Corners"));console.log("SUB: "+edgesSubString); 任何帮助将不胜感激，我已经用尽了我的技能。

Answer 1

如果您修复 HTML 以便它可以被解析为 jQuery 对象，我在下面的示例中通过添加缺少的前导标记来完成，那么<label>您可以find()定位i元素，然后map()构建其文本数组. 尝试这个：

let str = '<label>Edges</label><div><div class="edges_and_corners_container"><div class="color-cont"><img class="color-img" src="img/tiles/light.png" style="background-color: rgb(226, 84, 153);"></div><div class="report_color_container"><i>Carnival Pink: </i>7</div></div><div class="edges_and_corners_container"><div class="color-cont"><img class="color-img" src="img/tiles/light.png" style="background-color: rgb(103, 66, 48);"></div><div class="report_color_container"><i>Chocolate Brown: </i>5</div></div></div></div><div><hr><label>';

var colours = $(str).find('i').map((i, el) => el.textContent.trim()).get();

console.log(colours);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

我建议使用正则表达式。

例如 ：

const str = 'Youre string'

const reg = /<i>[\w\s]+/g // find i tag and get all letters and spaces after that

const strings = str.match(reg).map(v => v.slice(3)) // after that remove i tag from resulting array of strings

将输出 => ["Carnival Pink", "Chocolate Brown"]

Answer 3

你可以用正则表达式来做到这一点

const STR = 'Edges</label><div><div class="edges_and_corners_container"><div class="color-cont"><img class="color-img" src="img/tiles/light.png" style="background-color: rgb(226, 84, 153);"></div><div class="report_color_container"><i>Carnival Pink: </i>7</div></div><div class="edges_and_corners_container"><div class="color-cont"><img class="color-img" src="img/tiles/light.png" style="background-color: rgb(103, 66, 48);"></div><div class="report_color_container"><i>Chocolate Brown: </i>5</div></div></div></div><div><hr><label>'

const res = STR.match(/(?<=<i>)[^:]*/g)

console.log(res)