如何获取HTML文本长度

先放答案。

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

原理

使用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中的第三到第七(不含)个字符