javascript - Hämta text i CSS3-kolumn?


Jag använder CSS3:s stöd för kolumner i ett projekt (hittills har jag funnit det mycket mer robust och pålitligt än de flesta JavaScript-lösningar som finns).

Fråga: Är det möjligt att på något sätt få texten som finns i en specifik kolumn?

Svar #1

Och... vad, två månader senare? Jag hittade äntligen svaret på denna fråga. Det beror på document.caretRangeFromPoint (Webkit) eller 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();
};

Svar #2

Mitt enda gissning är att börja ersätta mellanslag med en SPAN, sedan upptäcka när den vertikala positionen för den SPAN blir mindre, då vet du att du är i nästa kolumn. Den sista SPAN blir en kolumnmarkör.

Du kan sedan kopiera texten som är mellan början/slutet och/eller en kolumnmarkör.