javascript - 如何使用 jQuery 将行号添加到代码块？

Question

如果我有以下 HTML 标记：

<div class="code">
<pre>
      int i = 1;
      int j = 2;
</pre>
</div>

我想用 jQuery 把它变成这样的东西：

<table>
<tr><td>1</td><td><code>   int i = 1</code></td></tr>
<tr><td>2</td><td><code>   int j = 2</code></td></tr>
</table>

我目前正在使用 SyntaxHighlighter，但这对于我的简单需求来说似乎太复杂了。

我怎样才能简单地做到这一点？

Answer 1

您可以使用插件，但也可以非常轻松地构建一个简单的解决方案：

$('pre').html('<table>'+$.map($('pre').text().split('\n'), function(t, i){
    return '<tr><td>'+(i+1)+'</td><td><code>'+t+'</code></td></tr>';
}).join('')+'</table>');​

示范

---

而不是将每一行包装在一个<code>元素中，我更喜欢使用 CSS ：

javascript：

$('pre').html('<table>'+$.map($('pre').text().split('\n'), function(t, i){
    return '<tr><td>'+(i+1)+'</td><td>'+t+'</td></tr>';
}).join('')+'</table>');​

CSS：

pre table {
    font-family : courier;
    padding: 2px;
}
pre table td:first-child {
    color:#777;
    border-right: 1px solid #ccc;
}

示范

Answer 2

代码：jsfiddle。使用换行符拆分整个文本。

var a = $("pre").text().split(/\n/g);
html = "<table>";
for(var k=0; k< a.length; k++){
    if($.trim(a[k]) != "" ){
  html += '<tr><td>'+ (k+1) +'</td><td><code>  ' +(a[k])+'</code></td></tr>';
    }
}
html +="</table>";

;