我试图在HTML中获得每个单词的boundingRect。
例如,
<html><body>Lorem ipsum dolor</body></html>
我希望输出为[x, y, width, height] - word
[ 8, 8, 44.671875, 19 ] - Lorem
[ 56.5, 8, 43.125, 19 ] - ipsum
[ 103.4, 8, 35.02, 19 ] - dolor
我使用Chrome DevTools协议(CDP)来获取DOMSnapshot，它为一行提供了边界矩形，而不是单个单词。(源代码)
[ 8, 8, 130.46875, 19 ] Lorem ipsum dolor
如果我用span标签包装HTML中的每个单词，Chromium将提供所需的结果。但这个解决方案似乎有些老套。有更好的方法吗?
注意:
- 文本内容可以有与之相关联的样式和字体。所以每个字符的预先计算宽度不是一个选项。
- 我可以使用CDP将页面栅格化为PDF，并使用Foxit或类似的库获得word迭代器。但是我更喜欢完全用NodeJS做事情。
CDP处理节点。在您给出的示例中，我们有一个文本节点作为主体节点的子节点。文本节点的值为"Lorem ipsum dolor"。但是，如果我们有以下HTML:
<html>
<body>
<a>Lorem<a>
" "
<b>ipsum</b>
" "
<c>dolor</c>
</body>
</html>
我们将能够使用不同的文本节点来分离单词。从技术上讲，您可以查找文本节点并添加额外的节点，但这将使该过程更加繁重。
为您总结一下——由于在某些情况下多个单词可以是一个文本节点的值，我们无法使用CDP(在不严重干扰页面的情况下)单独获得节点中每个单词的坐标(或边界矩形)。