先放答案。

1
2
3
4
5
6
function getRects(startDom, startIndex, endDom, endIndex) {
  const range = document.createRange();
  range.setStart(startDom, startIndex);
  range.setEnd(endDom, endIndex);
  return range.getClientRects();
}

或者

1
2
3
4
const context = canvas.getContext('2d')!;
context.font = font;
const metrics = context.measureText(char);
const width = metrics.width;

原理

使用Range。Range 是一个 HTML 文档的片段，可以类比于 Photoshop 的选取。

  1. 把需要测量的文本添加到选区中
  2. 使用Range.getClientRects获取选区的位置和大小信息
  3. 根据你应用中选区的排序情况，依次计算文本长度

注意事项

需要注意选取的时候是选择了Element Node还是Text Node。例如需要选择 span 中文字的时候应该使用Text Node

1
const rects = getRects(span.firstChild, 3, span.firstChild, 7);

上述代码选择了 span 中的第三到第七（不含）个字符