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

Question

I have tried to find a way to get the values from this string:

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>

I need to find a way to get the colors "Carnival Pink" and "Chocolate Brown" from this string and add them to an array. The string is stored in a variable.

I get this string above into an var with this:

var edgesSubString = slb_report_raw.substring(
    slb_report_raw.lastIndexOf("Edges"), 
    slb_report_raw.lastIndexOf("Corners")
);
console.log("SUB: "+edgesSubString); 

Any help would be appreciated, I have exhausted my skills.

Answer 1

If you fix your HTML so that it can be parsed in to a jQuery object, which I've done in the following example by adding the missing leading <label> tag, then you can find() to target the i elements, and then map() to build the array of their text. Try this:

 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

I would suggest using regular expressions.

For example :

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

Will output => ["Carnival Pink", "Chocolate Brown"]

Answer 3

You could do this with regex

 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)