如何获取文本长度

Question

文本内容可能是中文、英文(大小写)、数字、字符等，css设置了文本大小，但是小写的英文并不是设置的文字大小，所以用文本的字数 乘以 文本的字体大小得到的并不是时间文本的宽度，所以我想能不能匹配两次，一次匹配大写，一次匹配小写，然后拿到大写的字母个数和小写字母的个数，分别 乘以 字体大小，然后把得到的数据相加，就是不知道怎么分别拿到各自的字体个数 比如文本： CXGSFDdfkdjfksdjfksdfieruwipw,要怎么获取文本的宽度呢？ 或者是否有其他解决方案，是否可以指点一下，非常感谢

Answer 1

ui 库 textarea 组件，有一个 autoSize 的功能，就是根据文字的多少来动态改变大小。

实现原理就是把内容写入一个相同的 div，css 属性都复制过来，然后读取 div 的大小

还有一种方案是 canvas 的一个 api， 可以返回文字的长度

CanvasRenderingContext2D.measureText() 方法返回一个关于被测量文本TextMetrics 对象包含的信息（例如它的宽度）。

至于你说的自行判断，需要等宽字体，个数统计可以用正则。获取出所有英文，然后剩下的就是中文咯

Answer 2

可以构建一个一模一样演示的dom，设置opacity: 1;渲染在页面上，可以获取宽度；

const divDom = document.createElement('div');
b.innerHtml = "dfdasfdasfdasfSDFDSFDSF";
b.style.opacity = 1;
b.id = "test";
document.body.appendChild(divDom);//渲染出来，获取到宽度以后可以立即删除
console.log(divDom.offsetWidth);

Answer 3

用 Canvas 画出来、然后 measureText() 可以取得像素级的准确宽度。

注意画的时候字体要设置成给你目标元素一样的，因为等宽字体和非等宽字体之类的区别会对宽度计算会有影响。

Answer 4

可以比较一下canvas和dom两种方案的精度。

function getTextWidth(text, font) {
    // if given, use cached canvas for better performance
    // else, create new canvas
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;
};

function getTextWidthDOM(text, font) {
  var f = font || '12px arial',
      o = $('<span>' + text + '</span>')
            .css({'font': f, 'float': 'left', 'white-space': 'nowrap'})
            //.css({'visibility': 'hidden'})
            .appendTo($('body')),
      w = o.width();

  //o.remove();

  return w;
}



console.log(getTextWidth("hello there!", "bold 12pt arial"));  // a bit more than 86 (sub-pixel accurate)
console.log(getTextWidthDOM("hello there!", "bold 12pt arial"));  // just 86 (sub-pixel accuracy has been dropped)

也可以直接在RunJS上看下效果（开调试）。

Answer 5

你可以把CXGSFDdfkdjfksdjfksdfieruwipw这串字符放入div中，通过获取dom节点信息，得到节点的宽度，像vue的$refs uniapp和小程序提供的api都可以获取到dom的信息