Solution 1 :

I have created a small example using JS.

let symbol = pricePara.innerText.split("")[0];
let price = pricePara.innerText.split(".");
let priceLHS = price[0].replace(symbol, "");
let priceRHS = price[1];
pricePara.innerHTML = "<sup>" + symbol + "</sup>" + priceLHS + "<sup>" + priceRHS + "</sup>"
<p id="pricePara">$29.98</p>

With multiple items.

const priceParas = document.querySelectorAll('.price');

priceParas.forEach(function(item) {
  let symbol = item.innerText.split("")[0];
  let price = item.innerText.split(".");
  let priceLHS = price[0].replace(symbol, "");
  let priceRHS = price[1];
  item.innerHTML = "<sup>" + symbol + "</sup>" + priceLHS + "<sup>" + priceRHS + "</sup>"
p {
  font-size: 3em;
<p class="price">$29.98</p>
<p class="price">$2934.983</p>
<p class="price">$29434.00398</p>

Problem :

Inside a rails app I have this <%= number_to_currency product.price %> which gives this html output: $29.98.

Is there a way I can style the above number_to_currency html output in order to look like the following?


enter image description here


Comment posted by Abhishek Pandey

I don’t know how rails work, but as JS, split output and then wrap it

Comment posted by Dev

Thanks for the reply @Abhishek Pandey… I have no idea how to implement what you just suggested. Can you please provide some sample code?

Comment posted by Dev

I forgot to mention that I’m looping through an array of products. So when I have only one product, It works fine, but when I have more then one its doesn’t show correctly. I think the

Comment posted by spickermann

Depending on the locale the currency can look totally different: For example, the currency symbol can be more that one character, the symbol could be at the end, the separator could be a comma instead of a dot…

Comment posted by Abhishek Pandey

@spickermann totally agree with you.

Comment posted by Abhishek Pandey

@Dev updated answer, I hope this works

Comment posted by Dev

hmmm… Now it changes all the


Leave a Reply

Your email address will not be published. Required fields are marked *