Obtenir la largeur de caractère en Javascript

Question

Je voudrais obtenir la largeur d'un caractère pour calculer la position d'un caractère donné (en pixels) à l'intérieur d'une chaîne. Je pense que ce serait facile car j'utilise une police monospace mais j'ai un problème.

J'ai essayé les suggestions dans this answer mais cela ne fonctionne pas pour les grandes chaînes. La précision est trop faible ce qui signifie que ça marche et que je peux obtenir la position des premiers caractères de la chaîne mais après, disons 10 caractères, la précision est si mauvaise que la position que je reçois pour le personnage est si loin qu'elle est en fait donnant la position du personnage avant.

Ce que je voudrais faire est d'obtenir la largeur d'un caractère si je peux écrire quelque chose comme ceci:

var charWidth = ???; 
var position = 5; // Shuold get the position of the fifth character in the string 
var calculatedPosition = charWidth * position; 

Answer 1

Essayez cette solution, developed by Ben Ripkens

CSS:

.textDimensionCalculation { 
    position: absolute; 
    visibility: hidden; 
    height: auto; 
    width: auto; 
    white-space: nowrap; 
} 

JS :

var calculateWordDimensions = function(text, classes, escape) { 
    classes = classes || []; 

    if (escape === undefined) { 
     escape = true; 
    } 

    classes.push('textDimensionCalculation'); 

    var div = document.createElement('div'); 
    div.setAttribute('class', classes.join(' ')); 

    if (escape) { 
     $(div).text(text); 
    } else { 
     div.innerHTML = text; 
    } 

    document.body.appendChild(div); 

    var dimensions = { 
     width : jQuery(div).outerWidth(), 
     height : jQuery(div).outerHeight() 
    }; 

    div.parentNode.removeChild(div); 

    return dimensions; 
}; 

Sur son blog, il écrit

Avec l'aide de ce petit extrait que nous pouvons maintenant calculer le texte dimensions comme celui-ci .:

var dimensions = calculateWordDimensions('42 is the answer!'); <!--obviously a hitchhikers guide fan, lol ---> 

console.log(dimensions.width); 
console.log(dimensions.height); 

---

Un alternate [jquery] solution a été écrit aussi par Phil Freo

$.fn.textWidth = function(text, font) { 
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body); 
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font')); 
    return $.fn.textWidth.fakeEl.width(); 
};