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

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

（小提琴）

---

编辑

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

1. 将段落分成几行。
2. 将每一行包裹在一个 span/div 中，然后重新附加。
3. 阻止浏览器进行文本换行。

---

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

（小提琴）

Answer 2

这是一个解决方案，它使用函数根据预先确定的行长将段落文本拆分为空格字符，然后用包含一行文本<ol>的元素替换文本：<li>

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

我不确定是否start支持<ol>. 它确实在 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 的差异页面。