C'è un modo semplice per definire gli ultimi due caratteri di una stringa?

Question

Ho alcuni numeri in virgola mobile in cui vorrei indicare che le ultime cifre non sono così importanti. Quello che ho in mente è qualcosa di simile.

Per il numero 273,978

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

Sarebbe bello se ci fosse qualcosa di simile a un selettore CSS "nth-last-caratteri". Quindi ho potuto impostare tutto nel mio file CSS, invece di tagliare il numero in JavaScript. C'è un modo migliore per raggiungere questo obiettivo?

EDIT: Ecco quello che una soluzione nativa JavaScript assomiglia:

<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

Fuori della parte superiore della mia testa 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> 

Ecco un fiddle dimostrarlo. Mi dispiace che non sia un semplice JavaScript, ma sono sicuro che una delle persone qui presenti possa offrire una soluzione nativa se questo non riduce il tuo mais.

UPDATE: E questa è una soluzione non jQuery e un'altra fiddle dimostrativa. Ho anche infranto lo stile nei 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

Si potrebbe utilizzare PHP per aggiungere una classe al tag span per i primi 3/4 caratteri (suppongo che si sta utilizzando PHP per generare questi numeri in virgola mobile) e una classe diversa da qualsiasi altra cosa,

Quindi aggiungi semplicemente le classi al tuo file CSS per evidenziare come desideri.

AFAIK non ci sono selettori CSS per fare ciò che si richiede, i selettori 'nth' sono più per tag, classi e id rispetto ai singoli caratteri.

MODIFICA: In javascript questo può essere fatto tramite foo.charAt (N);

Quindi caricare lo stringa in 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);

È possibile quindi stampare i caratteri nella posizione appropriata nel codice.

Answer 3

Diverso da un approccio lato server (il più semplice), è possibile aggiungere un intervallo di sovrapposizione che ha width: 1.75em; background-color: rgba(255,255,255,0.5) e correggerlo a destra di un oggetto contenitore e un indice z maggiore dell'oggetto di visualizzazione mobile principale.

Se ti senti sperimentale potresti provare l'HTML5 <input type="number" step="0.1" />element, che a seconda del browser potrebbe arrotondare al valore più vicino in base al suo valore.

Answer 4

avuto la stessa idea come Stef:

<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>