js 计算 字符 宽度

<span id="computeFontWidth"></span>

#computeFontWidth {
    visibility: hidden;
    white-space: nowrap;
}

／＊＊

    ＊ e 显示字符控件

    ＊ text 要显示的字符串

    ＊sumWidth e的宽度

    ＊／

function (e, text, sumWidth) {
        if (2 == arguments.length) {
            sumWidth = arguments[0].offsetWidth;
        } else if (3 == arguments.length) {
            sumWidth = arguments[2];
        } else {
            throw new Error("IllegalArguments Exception");
        }

        var fontSize = document.defaultView.getComputedStyle(e, null).getPropertyValue("font-size");
        var moreSpaceWidth = 0;
        var spaceCounter = innerSpaceStat(text);
        var spaceWidth = computeSpaceWidth(fontSize);
        for (var i = 0; i < spaceCounter.length; i++) {
            if (spaceCounter[i] > 1) {
                moreSpaceWidth += (spaceCounter[i] - 1) * spaceWidth;
            }
        }
        return sumWidth - computeFontWidth(text, fontSize) - moreSpaceWidth;
        //计算字符所占宽度
        function computeFontWidth(str, fontSize) {
            var width = 0;
            if (!!str && "string" == typeof str && str.length > 0) {
                var e = document.querySelector("#computeFontWidth");
                e.textContent = "";
                e.style.fontSize = fontSize;
                e.textContent = str;
                width = e.offsetWidth;
            }
            return width;
        }
        //计算空白字符所占宽度
        function computeSpaceWidth(fontSize) {
            return computeFontWidth("1 1", fontSize) - 2 * computeFontWidth("1");
        }
      //字符串内部空白字符统计
        function innerSpaceStat(str) {
            var counterArray = [];
            if (!!str && "string" == typeof str && str.length > 0) {
                var counter = 0;
                for (var i = 0; i < str.length; i++) {
                    if (" " == str.charAt(i)) {
                        counter++;
                    } else {
                        if (counter != 0) {
                            counterArray.push(counter);
                        }
                        counter = 0;
                    }
                }
            }
            return counterArray;
        }
    }