将连续行编号应用于段落中的行：可能吗？

Question

是否可以让 jquery/javascript 在段落中所有行的开头插入连续的行号，更好的是，按照顺序一直到后续段落？

我希望能够快速向学生推荐文章的特定行（在课堂环境中）。我有很多文章想要应用此功能，每篇文章都有不同数量的段落。

我希望这可能是可能的，即使在响应式页面中，段落的宽度会根据显示设备而变化，并且随后每个段落中的行数会变得更多或更少。

提前感谢任何可以提供帮助的人。

Answer 1

这是一种可能适合您目的的方法。

1. 获取单行段落的高度，供参考。
2. 对于每个段落，获取实际高度，并推断行数。
3. 遍历行并在绝对位置添加编号。

---

var refHeight = $("p").eq(0).height();
$("p").eq(0).remove();
var cnt = 1;
$("p").each(function(index) {
    var pos = $(this).position();
    var h = $(this).height();
    var lines = h / refHeight;
    var lineHeight = h / lines;
    for (var i=pos.top ; i<pos.top+h ; i += lineHeight) {
        var num = $("<p>", { class: "number" });
        num.text(cnt++);
        num.css("top", i);
        $(this).before(num);
        console.log(i);
    }
});

(Fiddle)

---

编辑

如果您想使用固定的行长（以便每个人看到相同的数字），您可以将上述内容与以下内容结合起来：

1. 将段落分成几行。
2. 将每一行包装在一个 span/div 中，然后重新附加。
3. Block the browser from text wrapping.

---

$("p").each(function() {
    var text = $(this).text();
    $(this).html("");
    var i=0;
    while (i<text.length) {
        lineCharWidth = charWidth;
        while (i+lineCharWidth < text.length && text[i+lineCharWidth] != ' ') {
            lineCharWidth++;
        }
        var line = $("<span>", { class: "line" }).text(text.substr(i, lineCharWidth));
        $(this).append(line).append("<br/>");
        i += lineCharWidth;
    }
});

(Fiddle)

Answer 2

Here's a solution 使用函数根据预定的行长将段落文本拆分为空格字符，然后将文本替换为由 <li> 元素组成的 <ol>，每个元素包含一行文本：

var lineNum = 1;

function splitLines(text, lineLen) {
    var words = text.split(/\s/g), line = '', lines = [];
    $.each(words, function(idx) {
        line += this + ' ';
        if (line.length > lineLen || idx == words.length - 1) {
            lines.push(line);
            line = '';
            lineNum += 1;
        }
    });
    return lines;
}

$('p').each(function() {
    var $p = $(this), $ol = $('<ol start="' + lineNum + '">'), lineLen = 50;

    $.each(splitLines($p.text(), lineLen), function(idx) {
        $ol.append('<li>' + this + '</li>');
    });

    $p.text('').append($ol);
});

我不确定是否支持<ol> 的start 属性。它确实在 Chrome 中工作。尽管如此，我还是喜欢使用列表元素，因为我认为它在语义上更有意义。

Answer 3

当然。只需确保您正在编码您的换行符，并使用它通过简单的替换来分割文本。

示例文本：

The quick
brown fox
jumped over
the lazy dog

为此，实际的字符串如下：

The quick\r\nbrown fox\r\njumped over\r\nthe lazy dog

我认为这样的事情会起作用（没有 document.write，并且可能会提高性能）：

var input = '\r\nThe quick\r\nbrown fox\r\njumped over\r\nthe lazy dog';
input = input.replace(/\r\n/g, '<div class=\'index\'></div>');
document.write(input);
var idx = 0;
$('.index').each(function(){
    $(this).text(idx++);
});

如果我没记错的话，这应该在每一行写出一个索引号。不过可以使用一些测试/调试:)

有关如何完成此操作的示例，请查看 Github 的差异页面。