在Javascript中獲取字符寬度

Question

我想獲得一個字符的寬度來計算字符串內任何給定字符（以像素為單位）的位置。 我覺得這很容易，因為我使用的是等寬字體，但我遇到了問題。

我已經嘗試了這個答案中的建議， 但這對大字符串不起作用。 精度太差了，這意味着它可以工作，我可以得到字符串中前幾個字符的位置但是之后，比方說10個字符，精度是如此之差，以至於我得到的字符距離實際上是遠遠的在給出角色的位置之前。

我想要做的是獲得一個角色的寬度，這樣我就可以這樣寫：

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

Answer 1

試試這個由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;
};

他在博客上寫道

借助這個小片段，我們現在可以像這樣計算文字尺寸：

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

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

---

Phil Freo也寫了另一個[jquery]解決方案

$.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();
};