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 thatconst 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)