Wrap a sub-string containing a dollar sign with a <strong> using jQuery

Question

I have this HTMl from a db, <p>$10 remaining of $100 budget</p>

I'd like to wrap the $10 with a <strong> tag as below.

The dollar amount could change to be more than 2 digits, and I'd like to wrap the entire amount.

The result I'm seeking using jQuery/JS is...

<p><strong>$10<strong> remaining of $100 budget</p>

Thank you.

Answer 1

You can do :

$('p').html(function(_, old){
     return old.replace(/(\$\d+) /, '<strong>$1</strong> ');
})

Fiddle : http://jsfiddle.net/gEfzs/

Answer 2

You can do this all with string manipulation. DEMO Someone else could probably do this more efficiently with Regex but hey this works fine.

var priceStr = "<p>$10 remaining of $100 budget</p>";
// remove <p>
priceStr     = priceStr.substr("<p>".length, priceStr.length);
// convert to array and get `$10` as first element
var priceStrArr  = priceStr.split(' ');
// replace first element in array `$10` with wrapping string
priceStr = priceStr.replace(priceStrArr[0], '<p><strong>'+priceStrArr[0]+'</strong>');
// output
$('#thingy').html(priceStr);