Geek asks and answers

How can I get a single inner text?

Using CSS3 columns to retrieve multiple large text documents and scroll horizontally. Here is a code demo. http://jsfiddle.net/wojtiku/bFKpa/

I use the js code "document.documentElement.innerText", get the whole text of the document, but want to get the text of the column, how to do it?

+3
source share
3 answers

You can get the root element of each column to and innerTextfrom this element.

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

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

You can open the JS console of your browser and see the result (ctrl + shift + j in chrome).

EDIT

voithos , , . , , , . , , , . offscreen canvas 2d- 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]);
}

+2

, , .

 var childElement= document.getElementById("container").getElementsByTagName("p");
 for(var i=0;i<childElement.length;i++)
 {
   alert(childElement[i].innerHTML);  
 }

, html.

0

There is no easy way to do this. Columns do not exist as separate DOM elements, no more than lines of text.

You might be able to look for column breaks (for example, inserting a bunch of zero inline elements into the text and looking at their locations), but this would be a dirty and error-prone process.

0
source

More articles:


All Articles