javascript - HTML - 如何在不进行硬编码的情况下将 <span></span> 标记插入到 <pre></pre> block 的每一行中？

Question

我只是想使用 CSS 在源代码的开头添加行号。 实现了我想要的效果，如下:

但是，HTML 代码需要继续使用 <span>...</span>标签:

<pre class="code">
  <span>var links = document.getElementsByClassName("link");</span>
  <span>for(var i = 0; i &lt; links.length; i++){</span>
  <span>  links[i].onclick=function(){</span>
  <span>   alert(i+1);</span>
  <span>  };</span>
  <span>}</span>
</pre>

随着 span位于首页/行尾的标签我可以让行号按预期显示。 但我认为必须有另一个更好的解决方案来阻止我添加所有这些 span标签硬编码，可能使用 Javascript 或 jQuery 我不介意但不知道如何。请帮忙。

注意:
我的问题不是在 <span> 时如何显示行号标签已经存在。相反，我想知道原始 HTML 代码是否包含 NO <span>标签，如何自动将它们添加到合适的位置，以便我可以应用 CSS 样式。

Answer 1

我已将@Stewartside 的回答与您的实际要求相结合。

下面您可以看到一个简单的纯 JavaScript，它用 code 类替换元素中的任何行，并将其包装在应用 @Stewartside css 的 span 中。

var codeElement = document.getElementsByClassName("code"); //array of code blocks
var formattedCode = codeElement[0].textContent.replace("\r\n", "\n").split("\n");
var codeLength = formattedCode.length;
formattedCode.forEach(function(line, index, array) {
  if (codeLength - 1 == index) return; 
  array[index] = "<span>" + line + "</span>";
});

codeElement[0].innerHTML = formattedCode.join("\n");

$(".code-jquery").each(function(index, codeElement) {
  var formattedCode = $(codeElement).html().replace("\r\n", "\n").split("\n");
  
  var codeLength = formattedCode.length;
  $(codeElement).text("");
  $.each(formattedCode, function(index, line) {
    if (codeLength - 1 == index) return;
    $(codeElement).append("<span>" + line + "</span>\n")
  });
});

pre {
  background: #eee;
  counter-reset: section; /* Reset the counter to 0 for each new pre */
}
pre span:before {
  counter-increment: section; /* Increment the section counter*/
  content: counter(section); /* Display the counter */
  padding: 0 5px;
  border-right: 1px solid #777;
  margin-right: 5px;
  color: #777
}

pre.code-jquery span {
  color: green;
}

<pre class="code">
  var links = document.getElementsByClassName("link");
  for(var i = 0; i &lt; links.length; i++) {
    links[i].onclick = function() {
    	alert(i+1);
  	};
  }
</pre>

//jQuery version
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre class="code-jquery">
  var links = document.getElementsByClassName("link");
  for(var i = 0; i &lt; links.length; i++) {
    links[i].onclick = function() {
    	alert(i+1);
  	};
  }
</pre>