javascript - 如何统计一个DIV或P中line box的个数

Question

<div><span>aaaaaa</span> ... (many other span here) ... <span>zzzzzz</span></div>

在那种情况下，boxes span 被放置在 div 内的几个 line-boxes 上。(跨度元素可以使用不同的字体大小。)

1) 我们如何知道line-boxes的数量？

2) 我们能知道元素跨度放在哪个行框上吗？

3) 我们能知道插入符放在哪个行框上吗(contenteditable)？

谢谢

Answer 1

我假设您示例中的 DOM 是 DOM 实际复杂性的有效示例，并且“行框”只是一行文本。

1-2) 对于每个 <span>在<div>里面，您可以计算它们跨越的行数，如下所示:

var spans = div.getElementsByTagName("span"), spandata = [];
for (var i = 0; i < spans.length; i++) {
    var rects = spans[i].getClientRects();
    if (i > 0)
        if (rects[0].bottom > obj.rects[obj.rects - 1].bottom)
            var inirow = obj.lastRow + 1;
        else var inirow = obj.lastRow;
    var obj = {
        element: spans[i],
        rects: rects,
        iniRow: inirow,
        lastRow: inirow + rects.length - 1
    };
    spandata.push(obj);
}

现在spandata是您想要的有关 <span> 的所有数据的列表元素。我还假设它们中的每一个都可能跨越不止一行。

请记住 getClientRects在 IE<8 中有一些问题。

3) 在现代浏览器中，getSelection方法可以帮助你:

var sel = window.getSelection();
if (sel.type === "Caret")
    var span = sel.anchorNode.parentNode;

关于线的位置，我必须说这不是一件容易的事。您无法轻松获得插入符号的页面位置。您可以做的最简单的事情是在插入符号的位置放置一个虚拟内联元素:

var text = sel.anchorNode.nodeValue;
sel.anchorNode.nodeValue = text.substring(0, sel.anchorOffset);
var dummy = document.createElement("i");
span.appendChild(dummy);
var pos = dummy.getBoundingClientRect();
sel.anchorNode.nodeValue = text;
span.removeChild(dummy);

pos包含插入符位置的信息。现在你必须将它们与关于跨度的矩形信息进行比较:

var rects = span.getClientRects();
for (var i = 0; i < rects.length; i++)
    if (rects[i]].bottom === pos.bottom) break;

if (i < rects.length) {
   for (var i = 0; i < spandata.length; i++) {
       if (spandata[i].element === span) {
           var line = spandata[i].iniRow + i;
           break;
       }
   }
}

最后，如果line != null , 它包含插入符号的行。

伙计，这很复杂......