Regex has always been hard for me to understand, even trying to use regex101.com. I have a situation where I need each number wrapped in a span.
https://codepen.io/ryanreese09/pen/yLXLOrY
This works almost good, but it fails on the 37:1 line. I’m not sure how I can modify my regex to wrap the 37 in a span, and 1 in a span. So e.g. my output should be
<span>37</span>:<span>1</span>
Thanks 
.
Hey Ryan,
You can do it like this:
$(".test").each(function(){
const _ = $(this);
const content = _.text();
_.html(content.replace(/(\d+)/g, "<span>$1</span>"));
});
Output:
<p class="test"><span>37</span>:<span>1</span></p>
<p class="test"><span>100</span>%</p>
<p class="test"><span>100</span></p>
Quibble: Ryan’s original pattern wants to account for decimal numbers as well, James.
EDIT: Or have you updated your codepen, Ryan?
I technically should account for decimals as well. I did not notice that part missing. I updated my codepen since I posted this thread, which was a mistake. I should have made a new one to test James’ code.
Sure.
_.html(content.replace(/([1-9]\d*(\.\d+)?)/g, "<span>$1</span>"));
Input:
<p class="test">37:1</p>
<p class="test">100%</p>
<p class="test">99.</p>
<p class="test">99.....</p>
<p class="test">99.....9</p>
<p class="test">99.9</p>
<p class="test">99.9.9</p>
<p class="test">99.987654321</p>
<p class="test">100</p>
Output:
<p class="test"><span>37</span>:<span>1</span></p>
<p class="test"><span>100</span>%</p>
<p class="test"><span>99</span>.</p>
<p class="test"><span>99</span>.....</p>
<p class="test"><span>99</span>.....<span>9</span></p>
<p class="test"><span>99.9</span></p>
<p class="test"><span>99.9</span>.<span>9</span></p>
<p class="test"><span>99.987654321</span></p>
<p class="test"><span>100</span></p>
Does that do what you want?
You’re brilliant, thank you . I’ve always struggled with regex. It’s just a daunting bit of code. Is there a really dumbed down tutorial you recommend? I’ve read several over the years but it makes my eyes roll and makes me give up 
.
Edit - For example, comparing your last bit of regex to this, it’s such a big difference.
Not that I’d think to second guess you, but do those three follow the desired pattern? I’d expected to read them as
<p class="test"><span>99</span>.<span>9</span></p>
<p class="test"><span>99</span>.<span>9</span>.<span>9</span></p>
<p class="test"><span>99</span>.<span>987654321</span></p>
I have, of course, been wrong many times before, and expect to be proved so here too.
No worries
Nah, not really. For this second example, I just googled “JavaScript regex to match integer or decimal” and landed here:
The first answer does what we are after so I just used that
If you read that answer, it breaks the regex down and explains it really well. Let me know if there’s anything you don’t understand after reading that.
Not really, I’m afraid. I have just picked up bits and pieces over the years and usually know enough to manage to achieve whatever it is that I am trying to do. I don’t think I ever sat down and read a tutorial.
We have this, over on the main site. This might be a good starting point if you are looking for a refresher.
Nah man, as I understood it, Ryan is trying to wrap spans around any integers (so 2 becomes <span>2</span>), but he is also trying to wrap spans around decimals (so 2.0 becomes <span>2.0</span>). Under this assumption, the results posted above were correct.
I think I was being thrown by this earlier line, which doesn’t make a lot of sense as a number anyway.
correct. the pattern reads:
[1-9]\d*(\.\d+)?
In “english”:
“A number that is not 0, followed by any number of digits; possibly followed by the combination of: a single period and then one or more digits”
EDIT: Now with crayons for easier reading.
Except the yellow, which is just horrible on my screen - works better if cursored over.
Dark mode forever. 
I agree, gold works much better than yellow, and I find that replacing orange for darkorange in my crayon set makes for easier reading too. https://colours.neilorangepeel.com/
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.