[英]to apply sequential line numbering to lines in a paragraph: is it possible?
Is it possible to have jquery/javascript insert sequential line number at the start of all lines in a paragraph and, better still, to follow the sequence through to subsequent paragraphs? 是否可以让jquery / javascript在段落中所有行的开头插入顺序行号,并且更好的是,按照顺序执行到后续段落?
I want to be able to refer students quickly to particular lines of an article (in a classroom setting). 我希望能够(在课堂环境中)快速地将学生引荐到文章的特定行。 I have lots of articles to which I would like to apply this functionality, each of which has varying numbers of paragraphs.
我有很多文章想要应用此功能,每篇文章都有不同数量的段落。
I was hoping this might be possible, even in a responsive page, where the width of the paragraphs changes, depending on the display device, and the consequent number of lines in each paragraph becomes greater or fewer. 我希望,即使在响应页面中,段落的宽度根据显示设备而变化,并且每个段落中相应的行数变得越来越多,这也是可能的。
Thanks in advance to anyone who can help. 在此先感谢任何可以提供帮助的人。
Here is one approach that may suit your purposes. 这是一种可能适合您目的的方法。
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);
}
});
Edit 编辑
If you wanted to use a fixed line length (so that everyone is seeing the same numbers), you could combine the above with the following: 如果您想使用固定的行长(以便每个人都看到相同的数字),则可以将以上内容与以下内容结合使用:
$("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;
}
});
Here's a solution that uses a function to split the paragraph text on space characters based on a pre-determined line length and then replaces the text with an <ol>
comprised of <li>
elements each containing one line of text: 这是一种解决方案 , 该解决方案使用函数根据预定的行长在空格字符上分割段落文本,然后将其替换
<ol>
<li>
元素组成的<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);
});
I'm not sure about the support for the start
attribute of the <ol>
. 我不确定对
<ol>
的start
属性的支持。 It does work in Chrome. 它确实可以在Chrome中运行。 Even still, I like using the list element because it's a little more semantically meaningful, in my opinion.
即便如此,我还是喜欢使用list元素,因为我认为它在语义上更具意义。
Sure. 当然。 Just make sure you're encoding your line returns and use it to split up the text with a simple replace.
只需确保对行返回值进行编码,并使用它来替换简单的替换文本即可。
Sample text: 示范文本:
The quick
brown fox
jumped over
the lazy dog
for this, the actual string would be the following: 为此,实际的字符串如下:
The quick\r\nbrown fox\r\njumped over\r\nthe lazy dog
I think something like this would work (without the document.write, and there could be performance improvements): 我认为类似这样的方法会起作用(没有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++);
});
If I'm not mistaken, this should write out an index number on each line. 如果我没记错的话,这应该在每一行写出一个索引号。 Could use some testing/debugging, though :)
可以使用一些测试/调试:)
For an example of how this is done, check out Github's diff pages. 有关如何完成此操作的示例,请查看Github的diff页面。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.