¿Hay alguna manera fácil de dar estilo a los últimos dos caracteres de una cadena?

Question

Tengo algunos números de punto flotante donde me gustaría indicar que los últimos dígitos no son tan importantes. Lo que tengo en mente es algo como esto.

Para el número 273,978

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

Sería muy bueno si había algo así como un selector CSS "nth-last-caracteres". Entonces podría configurar todo esto en mi archivo CSS, en lugar de cortar el número en JavaScript. ¿Hay una mejor manera de lograr esto?

EDIT: Esto es lo que parece una solución nativa de JavaScript como:

<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

De la parte superior de la cabeza en 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> 

Aquí hay una fiddle para demostrarlo. Lamento que no sea JavaScript, pero estoy seguro de que una de las personas aquí puede ofrecerle una solución nativa si esto no le corta el grano.

ACTUALIZACIÓN: Y aquí hay una solución que no es jQuery, y otra fiddle demostrándola. También rompí el estilo en 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> 

Answer 2

Se puede usar PHP para agregar una clase para la etiqueta span para los primeros caracteres 3/4 (supongo que está utilizando php para generar estos números de coma flotante) y una clase diferente a cualquier cosa después de eso,

Luego simplemente agregue las clases a su archivo CSS para resaltarlas como lo desee.

AFAIK no hay selectores de CSS para hacer lo que necesita, los 'enésimos' selectores son más para las etiquetas, las clases y los identificadores que los caracteres individuales.

EDITAR: En javascript, esto se puede hacer mediante el uso de foo.charAt (N);

Así cargar su cadena en una var:

var foo=[number generation code]; 
var foo0=foo.charAt(0); 
var foo1=foo.charAt(1); 
var foo2=foo.charAt(2); 
var foo3=foo.charAt(3);

A continuación, puede imprimir los caracteres en el lugar apropiado en el código.

Answer 3

Aparte de un enfoque del lado del servidor (el más fácil), puede agregar un lapso de superposición que tiene width: 1.75em; background-color: rgba(255,255,255,0.5) y arreglarlo a la derecha de un objeto contenedor y un índice z mayor que el objeto flotante principal.

Si te sientes experimental, puedes probar el HTML5 <input type="number" step="0.1" />element, que según el navegador redondeará al valor más cercano en función de su valor.

Answer 4

tenía la misma idea como Stef: Sólo

<style type="text/css"> 
    .number { 
     font-family: monospace; 
    } 
    .number:after { 
     background-color: rgba(255,255,255,0.5); 
     content: ""; 
     display: inline-block; 
     height: 1em; 
     width: 1.2em; 
     position: relative; 
     top: 0.25em; 
     right: 1.2em; 
    } 
</style> 

<span class="number">273.978</span>