Question

是否有可能让jquery / javascript在段落中所有行的开头插入顺序行号，更好的是，按顺序执行后续段落？

我希望能够快速将学生推荐到文章的特定行（在教室环境中）。我有很多文章要我应用这个功能，每个文章都有不同数量的段落。

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

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

Answer 1

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

获取单行段落的高度，以供参考。
对于每个段落，获取实际高度，并推断出行数。
循环划线并在绝对位置添加编号。

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)

修改

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

将段落分成几行。

换算span / div中的每一行，然后重新附加。

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使用函数根据预先确定的行长度拆分空格字符上的段落文本，然后将<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>的{{1}}属性的支持。它在Chrome中有效。即使如此，我仍然喜欢使用list元素，因为在我看来，它在语义上更有意义。

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的差异页面。

将顺序行编号应用于段落中的行：是否可能？

3 个答案: