Currently, I am retrieving data from an API through a SOAP call.
After pulling in the data, the resulting HTML structure appears as follows:
<div class="component_wrapper">
2 man Teams<br>
20 Min AMRAP<br>
50 Double Unders<br>
50 Push Ups<br>
50 Toes 2 Bar<br>
50 Push Press 95/65<br>
50 Heavy Lunges 45/25<br>
</div>
I am looking to style two different parts of this content separately - the numbers and the descriptions. However, wrapping all the numbers in a span tag would also apply styling to elements like "95/65", which is not desired.
My approach involves identifying everything before the first space and wrapping it with
<span class="count"></span><span class="description"></span><span class="description"></span>The reasoning behind this logic is that even long numbers like 1000 will be properly styled, while text without numbers will be treated as descriptions.
Is it feasible to implement such functionality? The closest code snippet I could find to achieve this is:
str.substr(0,str.indexOf(' ')); // "2"
str.substr(str.indexOf(' ')+1); // "man Teams"
Thank you.