javascript - 如何获取单页内部文本？

Question

使用 CSS3 columns 获取一个较大的文本文档并使其水平滚动。这是代码演示。- http://jsfiddle.net/wojtiku/bFKpa/

我使用“document.documentElement.innerText”js代码，获取所有文档文本，但我想获取列文本，怎么办？

Answer 1

您可以获取每一列的根元素以及该元素的 innerText。

var elements = document.getElementById("container").getElementsByTagName("p");
for(var i = 0; i < elements.length; ++i) {
    console.log("COLUMN " + i + "\n");
    console.log(elements[i].innerText);
};

fiddle :http://jsfiddle.net/4mHCb/3/

您可以打开浏览器的 JS 控制台并查看输出(在 chrome 中为 ctrl+shift+j)。

编辑

感谢 voithos 指出了我忽略的地方。考虑到他所说的，我很确定没有办法准确地做到这一点。然而，这里有一个总的 hack，它近似于你正在寻找的东西。它使用屏幕外 canvas和二维上下文的 mesaureText方法: http://jsfiddle.net/4mHCb/5/

var elements = document.getElementById("container").getElementsByTagName("p");
var g2d = document.createElement("canvas").getContext("2d");
var containerStyle = document.getElementById("container").style;

var columnWidth = 150;
var lineHeight = 18;
var columnHeight = 300;
var linesPerCol = columnHeight / lineHeight;
var results = [];
for(var i = 0; i < elements.length; ++i) {
    var colText = elements[i].innerText;
    var textWidth = g2d.measureText(colText).width;
    var numCols = textWidth / (columnWidth * linesPerCol);

    var charIdx = 0;
    for (var column = 0; column < numCols; ++column) {
       var currString = "";
       var currTextWidth = 0;
       for (; charIdx < colText.length && currTextWidth < columnWidth*linesPerCol;    ++charIdx) {
           currString += colText[charIdx];
           currTextWidth = g2d.measureText(currString).width;
       }
       results.push(currString);
   }
}

for(var column = 0; column < results.length; ++column) {
   console.log("COLUMN: " + column);
   console.log(results[column]);
}