Wrap each number in a span - ignoring non digits

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.

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


Thanks :slight_smile: .

Hey Ryan,

You can do it like this:

  const _ = $(this);
  const content = _.text();
  _.html(content.replace(/(\d+)/g, "<span>$1</span>"));


<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.


_.html(content.replace(/([1-9]\d*(\.\d+)?)/g, "<span>$1</span>"));


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


<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?

1 Like

You’re brilliant, thank you :slight_smile: . 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 :laughing: .

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 :slight_smile:

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 :slight_smile:

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:


(Ignoring the outer pattern parenthesis, because they’re fairly irrelevant and could be replaced by using $0 in the replacement.)

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. :stuck_out_tongue:

1 Like

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.