Wrap specific part of string with HTML element

Question

Let’s say I have a headline (<h1>) that says The 20 Most Useful Users on Stack Exchange. Is there a way to add a <span class="numbers"></span> element only around the 20 with JavaScript?

Of course there is a way! It depends on what this 20 can be. Numbers, worsds etc' — raam86
– raam86, Commented Jul 6, 2013 at 1:33
@AshwinMukhija I wouldn't ask the question if I knew how to do it on my own now would I? — Chozen
– Chozen, Commented Jul 8, 2013 at 15:53
Mostly a duplicate of regex - Javascript replace with reference to matched group? - Stack Overflow. — user202729
– user202729, Commented Aug 16, 2021 at 13:56

raam86 · Accepted Answer · 2013-07-06 01:54:17Z

2

Easiest way to achieve this is:

$('h1').each(function (_, el) {
var $this = $(el);
var h1Content = $this.html();
$this.html(h1Content.replace(/(\d+)/, '<span>$1</span>'));
});

This assumes you want the first number. DEMO

edited Jul 6, 2013 at 1:54

answered Jul 6, 2013 at 1:36

raam86

6,8812 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jason · Accepted Answer · 2013-07-06 01:50:14Z

2

Assuming the string will only have one set of digits:

function wrapNum(str) {
    return str.replace(/\d+/, '<span>$&</span>');
}

Demo | .replace() Documentation

edited Jul 6, 2013 at 1:50

answered Jul 6, 2013 at 1:44

Jason

52.7k38 gold badges139 silver badges187 bronze badges

1 Comment

bozdoz Over a year ago

Otherwise, just add a global flag: /\d+/g

Collectives™ on Stack Overflow

Wrap specific part of string with HTML element

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related