Question

I have some floating point numbers where I would like to indicate that that the last few digits are not that important. What I have in mind is something like this.

For the number 273.978

<span style="font-weight:bold">273.9</span><span style="color:#3399ff">78</span>

It would be great if there were something like a “nth-last-chars” CSS selector. Then I could set this all up in my CSS file, instead of chopping the number in JavaScript. Is there a better way to achieve this?

EDIT: Here’s what a native JavaScript solution looks like:

<span id="numstart" style="font-weight:bold">123.4</span><span id="numend" style="color:#3399ff">57</span>

<script>
var newnum = 273.978;
var numStr = String(newnum)
var numLen = numStr.length;
var newStart = numStr.substring(0,numLen-2);
var newEnd = numStr.substring(numLen-2,numLen);
document.getElementById("numstart").innerHTML = newStart;
document.getElementById("numend").innerHTML = newEnd;
</script>

Answer 1

Off the top of my head in jQuery:

<script type="text/javascript">
$('.numbers').each(function() {
    $(this).html(
        $(this).html().substr(0, $(this).html().length-2)
          + "<span style='color: #3399ff'>"
          + $(this).html().substr(-2)
          + "</span>");
});
</script>

Here’s a fiddle to demonstrate it. I’m sorry it’s not plain JavaScript, but I’m sure one of the folks here can offer a native solution if this doesn’t cut your corn.

UPDATE: And here’s a non-jQuery solution, and another fiddle demonstrating it. I also broke the style out into CSS.

<style type="text/css">
.unimportant {
    color: #3399ff;
}
</style>

<script type="text/javascript">
var numberTargets = document.getElementsByClassName('number');
for(i=0; i<numberTargets.length; i++) {
    var html = numberTargets[i].innerHTML;
    numberTargets[i].innerHTML = html.substr(0, html.length-2)
      + "<span class='unimportant'>"
      + numberTargets[i].innerHTML.substr(-2)
      + "</span>";
}
</script>