Obtain a line of a paragraph in HTML

html, javascript

Solution

Demo 1: http://jsfiddle.net/LeTW6/2/ Demo 2: http://jsfiddle.net/LeTW6/3/

I'm using jQuery here for simplicity, but this would work with pure JavaScript. In fact, I'm using direct DOM access for performance in some parts.

- Break all words into separate elements.

- Use position to calculate the line number.

- At the selected line, start building a buffer of all word elements.

- Greater than the selected line, quit.

- On resize, recalculate (this may not be needed, or may be invoked from a different event).

Code

(function () {

    // wrap all words
    $(".count").each(function () {
        var obj = $(this);
        var html = obj.html().replace(/(\S+\s*)/g, "<span>$1</span>");
        obj.html(html);
    });

    var offset = 0; // keeps track of distance from top
    var spans = $(".count span"); // collection of elements

    function getLine(index) {
        var top = 0,
            buffer = [];

        for (var i = 0; i < spans.length; i++) {

            if (top > index) {
                break; // quit once the line is done to improve performance
            }

            // position calculation
            var newOffset = spans[i].offsetTop;
            if (newOffset !== offset) {
                offset = newOffset;
                top++;
            }

            // store the elements in the line we want
            if (top === index) {
                buffer.push(spans[i]);
            }
        }

        // buffer now contains all spans in the X line position

        // this block is just for output purposes
        var text = "";
        for (var i = 0; i < buffer.length; i++) {
            text += buffer[i].innerHTML;
        }

        $("#output").html(text);
    }

    var line = 3; // the line to select/highlight
    getLine(line); // initial highlighting

    // other recalculation triggers can be added here, such as a button click

    // throttling to handle recalculation upon resize
    var timeout;
    function throttle() {
        window.clearTimeout(timeout);
        timeout = window.setTimeout(function () {
            getLine(line);
        }, 100);
    }

    $(window).on("resize", throttle);
})();

See also my answer for highlighting alternate lines in a variable width container.

Problem

Original source

Related problems

• How to target alternate odd/even text lines