在HTML中获取一个段落的一行

Obtain a line of a paragraph in HTML

本文关键字：段落 一行 一个 HTML 获取      更新时间：2023-09-26

在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/

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

为了简单起见，我在这里使用jQuery，但这将与纯JavaScript一起工作。事实上，我在某些部分使用直接DOM访问来提高性能。

    将所有单词分割成单独的元素。
  1. 使用位置计算行号
  2. 在选定的行中，开始构建一个包含所有单词元素的缓冲区。
  3. 大于所选行，退出
  4. 调整大小，重新计算(这可能不需要，也可能从其他事件调用)。

(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);
})();

如果你想使用纯JavaScript来提高性能，这样你就不必包含jQuery，你可以使用这个

演示:http://jsfiddle.net/PX7cj/2/ 

function getLine(paragraphId, lineNum) {
    lineNum--;
    var elem = document.getElementById(paragraphId);
    var spanChildren = elem.getElementsByTagName("span");
    var paragraphText = elem.innerHTML.replace(/('r'n|'n|'r)/gm, "");
    var newParagraphText = "";
    var words = [];
    if (spanChildren.length === 0) {
        words = paragraphText.split(" ");
        for (var i = 0; max = words.length, i < max; i++)
        newParagraphText += '<span>' + words[i] + "</span> ";
        elem.innerHTML = newParagraphText;
    }else{
        for(var i=0; max = spanChildren.length, i<max; i++){
            words[words.length] = spanChildren[i].innerHTML;
        }
    }
    var lineCounter = 0;
    var previousY = spanChildren[0].offsetTop;
    var returnText = "";
    var startReturning = false;
    for (var i = 0; max = words.length, i < max; i++) {
        if (spanChildren[i].offsetTop != previousY) lineCounter++;
        if (lineCounter === lineNum) startReturning = true;
        if (lineCounter !== lineNum && startReturning) return returnText.substring(0, returnText.length - 1);
        if (startReturning) {
            returnText += words[i] + " ";
            if (i + 1 === words.length) return returnText.substring(0, returnText.length - 1);
        }
        previousY = spanChildren[i].offsetTop;
    }
}
alert(getLine("sampleParagraph", 5));
alert(getLine("sampleParagraph", 4));
相关文章：