我正在尝试使用pre html标记来包含一些我要格式化的代码。我从预先存在的pre标签中获取代码,然后创建一个包含代码的表,然后对其进行格式化。但是每隔一次我创建一个td元素,其中包含一些文本,而是创建一个空表。我的代码如下:
function init() {
var pres = document.getElementsByTagName('pre');
for (var i = 0; i < pres.length; i++) {
var elem = pres[i];
var ourTable = document.createElement('table');
if (elem.className.toLowerCase() == 'code') {
var lineCount = 1;
var linesOfText = elem.innerHTML.split(/\r|\n/);
for (var j = 0; j < linesOfText.length; j++) {
var ourRow = document.createElement('tr');
var lineNumberTd = document.createElement('td');
var lineNumberNode = document.createTextNode(lineCount);
lineNumberTd.appendChild(lineNumberNode);
ourRow.appendChild(lineNumberTd);
var code = linesOfText[j];
var codeTd = document.createElement('td');
var ourPre = document.createElement('pre');
ourPre.innerHTML = code;
codeTd.appendChild(ourPre);
ourRow.appendChild(codeTd);
lineCount++;
ourTable.appendChild(ourRow);
}
}
elem.parentNode.replaceChild(ourTable, elem);
}
}
window.onload = init;
我的HTML如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" href="DefaultStyle.css" />
<title>Autoformatter</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<pre class="code">
while (!stop)
{
while (packetQueue.Count > 0)
{
HandlePacket(packetQueue.Dequeue());
}
}
</pre>
</div>
</form>
<script type="text/javascript" src="PrimaryScript.js" ></script>
</body>
</html>
这会生成如下内容:
还有第4,6和8行第2行的空表。
答案 0 :(得分:1)
问题是您使用的是NodeList:
var pres = document.getElementsByTagName('pre');
for (var i = 0; i < pres.length; i++) {
NodeLists是“实时”集合,即它们会发生变化。在开始时,您有一个预标记,因此pres.length
返回1.但在循环内添加预标记。所以pres.length
也会发生变化。因此,你的循环会一次又一次地运行。
答案 1 :(得分:0)
好的,所以我自己想出了问题的答案。
显然,在某种程度上,行
elem.parentNode.replaceChild(ourTable, elem);
运行的次数超过应有的次数,因此它用新表替换了新制作的pre-element,因为新制作的pre-element没有class ='code'属性集。
将该单行放入
if (elem.className.toLowerCase() == 'code') {
而不是在它之外,解决了我的问题。