在HTML中获取段落的一行 [英] Obtain a line of a paragraph in HTML

问题描述

在JavaScript中，是否可以从页面上显示的段落中获取特定行？

In JavaScript, is it possible to obtain a specific line from a paragraph that is displayed on a page?

例如，我在这里尝试获取段落的第3行作为字符串：

For example, here I'm trying to obtain the 3rd line of a paragraph as a string:

JavaScript：

JavaScript:

//this function should return the specified line from the specified paragraph.
function getLine(paragraphId, lineNum){
    //for example, getLine("sampleParagraph", 1); should return
    // tore but year. An from mean on with when sing pain. Oh to as principles devonshire
}

HTML：

<p id = "sampleParagraph">
Instrument cultivated alteration any favourable expression law far nor. Both new like tore but year. An from mean on with when sing pain. Oh to as principles devonshire companions unsatiable an delightful. The ourselves suffering the sincerity. Inhabit her manners adapted age certain. Debating offended at branched striking be subjects.
</p>

这里是jsfiddle（显示段落的显示方式）： http://jsfiddle.net/RrXWW/

Here it is on jsfiddle (showing how the paragraph is displayed): http://jsfiddle.net/RrXWW/

推荐答案

演示1： http://jsfiddle.net/LeTW6/2 /

演示2： http：/ /jsfiddle.net/LeTW6/3/

我在这里使用jQuery是为了简单，但这适用于纯JavaScript。实际上，我在某些部分使用直接DOM访问来提高性能。

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.

1. 将所有单词分解为单独的元素。


2. 使用position来计算行号。


3. 在所选行中，开始构建所有单词元素的缓冲区。


4. 大于所选行，退出。


5. 在调整大小时，重新计算（可能不需要，或者可能从其他事件调用）。

1. Break all words into separate elements.
2. Use position to calculate the line number.
3. At the selected line, start building a buffer of all word elements.
4. Greater than the selected line, quit.
5. 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);
})();

另见我的答案是在可变宽度容器中突出显示备用行。

这篇关于在HTML中获取段落的一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！