0

I would like suggestions on how to change the font/color the two last digits of a number with 10 decimal places, see below.

0.0000000012

What I would like to do is change the font/colour of only the '12' numbers to red and half the size whilst the leading 0.00000000 remains black and normal text size.

Is anyone able to provide any examples on how to do this?

daygle
  • 61
  • 7
  • 6
    You should add those last two digits in other span, to do that... – ElusiveCoder Oct 15 '18 at 06:19
  • What did you try and how far did you get? Show us your code, at the very least show us how you get the number. Is it in a JavaScript variable when you begin? – Mr Lister Oct 15 '18 at 06:21
  • In case you don't have a fixed number of decimal places (e.g. not always 10) you can use regex to find proper part of the string, then create 2 spans with different styles for each span – Dolf Barr Oct 15 '18 at 06:21
  • Are you able to provide an example? – daygle Oct 15 '18 at 06:28
  • If you don't want to use another `span` tag or something similar, Here is a link https://stackoverflow.com/questions/23737776/how-to-color-specific-word-in-a-container-using-css – chintuyadavsara Oct 15 '18 at 06:29

2 Answers2

1

In case you hard code these numbers, for example:

Your code:

<p>0.0000000012</p>

Solution to your problem:

<span>0.0000000012</span>
<br />

<!-- Solution -->
<span>0.00000000</span><span style="color: red; font-size: 10px;">12</span>

Of course you should style with CSS - better practice. Also, take a look at RegExp.

tera_789
  • 489
  • 4
  • 20
  • Excellent, what about an example for the regex? – daygle Oct 15 '18 at 06:33
  • If this solved your problem, please mark my answer as accepted. Regarding `RegExp`: Stack Overflow community encourages you to first try and solve the problem by yourself, and then ask for help based on where you got stuck. Since I gave you a working solution already, **it is for your own benefit to try to solve this problem yourself** in a different way - using `RegExp`. There are many examples provided in the link above as well as other Internet resources. – tera_789 Oct 15 '18 at 06:47
1

The code below will dynamically highlight a number after dot ".", which is not equal to 0;

<p id="number">0.0000000012</p>

<script>
  var el = document.getElementById('number').innerText;
  var a = el.split('.');
  var x = '';
  var y = '';

  for(var i=0; i<a[1].length; ++i)  {
    if(a[1][i] == 0)
      x = x + a[1][i];
    else
      y = y + a[1][i];
  }

  var n = a[0]+'.'+x+'<span style="color:red;">'+y+'</span>';

  document.getElementById('number').innerHTML = n;
</script>
Salim Ibrohimi
  • 1,351
  • 3
  • 17
  • 35