단일 페이지 내부 텍스트는 어떻게 얻을 수 있습니까?

Question

CSS3 열을 사용하여 다소 큰 텍스트 문서를 가져 와서 가로로 스크롤합니다. 다음은 코드 데모입니다 .- 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); 
}; 

바이올린 : http://jsfiddle.net/4mHCb/3/

당신은 당신의 브라우저의 JS 콘솔을 열고 출력 (CTRL + 크롬에서 Shift + J)를 볼 수 있습니다.

편집

덕분에 내가 간과 무슨 지적에 대해 voithos합니다. 그가 말한 것을 감안할 때, 정확하게 이것을 할 방법이 없다고 확신합니다. 그러나, 여기 당신이 찾고있는 것을 대략적으로 총 해킹이 있습니다. 그것은 오프 스크린 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]); 
} 

Answer 2

나는 확실하지 않다가, 이것은 당신이 위의

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

.. 얻으려고 노력하는 것입니다 스 니펫은 루프 할 수있는 para 태그의 콜렉션을 리턴하고 html 컨텐츠를 가져옵니다.

Answer 3

쉬운 방법은 없습니다. 열은 별도의 DOM 요소로 존재하지 않으며 텍스트 행 이상은 존재하지 않습니다.

예를 들어 텍스트에 크기가 0 인 인라인 요소를 삽입하고 위치를 보면 열 구분을 찾을 수는 있지만 지저분하고 오류가 발생하기 쉬운 프로세스입니다.