Wrap specific part of string with HTML element

Question

Lets say I have a headline (h1) that says:

The 20 Most Useful Users on Stack Exchange

Is there a way to add a element only around the "20" and only the "20" with jQuery or pure Javascript?

Answer 1

Assuming the string will only have one set of digits:

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

Demo | .replace() Documentation

Answer 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