javascript - CSS3 컬럼에서 텍스트 가져오기?

저는 프로젝트에서 CSS3의 컬럼 지원을 사용하고 있습니다(지금까지는 대부분의 자바스크립트 솔루션보다 훨씬 더 견고하고 신뢰할 수 있다는 것을 발견했습니다).

질문: 특정 열에 있는 텍스트를 어떤 식으로든 얻는 것이 가능합니까?

답변 #1

그리고… 뭐, 두 달 후에? 나는 마침내 이 질문에 대한 답을 찾았다. 이는 document.caretRangeFromPoint(Webkit) 또는 document.caretPositionFromPoint에 의존한다.

var getAllTextInColumn = function(rect){
    /*
        rect should be the size and x,y of the column
        { top, left, width, height }
    */

    if(document.caretRangeFromPoint){
        var caretRangeStart = document.caretRangeFromPoint(rect.left, rect.top);
        var caretRangeEnd = document.caretRangeFromPoint(rect.left+rect.width-1, rect.top+rect.height-1);
    } else {
        return null;
    }

    if(caretRangeStart == null || caretRangeEnd == null) return null;

    var range = document.createRange();
    range.setStart(caretRangeStart.startContainer, caretRangeStart.startOffset);
    range.setEnd(caretRangeEnd.endContainer, caretRangeEnd.endOffset);

    return range.toString();
};

답변 #2

내 유일한 추측은 공백을 SPAN으로 바꾸기 시작한 다음, 그 SPAN의 세로 위치가 작아질 때를 감지하는 것입니다. 그러면 다음 열에 있다는 것을 알 수 있습니다. 이 마지막 SPAN이 열 표시자가 됩니다.

그런 다음 시작/끝과 열 구분자 사이에 있는 텍스트를 복사할 수 있습니다.