JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
	<h1>Time is Money</h1>
	<p> Find out how much time it will take you to buy something!</p>
</div>

<div class="test">$12</div>
<ul>
	<li>$12</li>
	<li>$14.99</li>
	<li>$2</li>
	<li>$dollars</li>
	<li>14.99</li>
	<li>$12,000</li>
</ul>

CSS

body {
	font-family: Helvetica, Arial, sans-serif;
}

h1{
	font-size: 30px;
	color: green;
}

p {
	font-size: 18px;
}

JavaScript

(function(context){
      var pattern=/(\$)(\d([\d\,\.]+)?)/g,
          callback=function(_,dollar,price){
               price=price.replace(/,/g,''); 
               return dollar + parseFloat(price)*2;
          },
          html=context.innerHTML.replace(pattern,callback);
      context.innerHTML=html;
    })(document.body);