"innerText"有时包含的换行符多于用户按回车键的换行符

Question

我正在尝试用JavaScript构建一个PicoBlaze模拟器，用户在其中输入汇编代码。我尝试制作一个界面，该接口显示用户输入的汇编代码中的行号，并在语法上突出显示汇编代码。但是，在某些情况下，行号无法正常工作。如果您单击带有用户应该键入汇编代码的contenteditablediv(称为assemblyCode)，并且按回车键两次，它将声称有四行代码，即使其中只有三行。控制留给它的显示代码行(称为lineNumbers)的div的JavaScript是这样的：

function setUpLineNumbers() {
const assemblyCode = document.getElementById("assemblyCode").innerText;
const numberOfLines = Math.max(
(assemblyCode.match(/n/g) || []).length,
1
);
let lineNumbersHTML = "";
for (let i = 1; i <= numberOfLines; i++)
lineNumbersHTML += i + ".<br/>";
document.getElementById("lineNumbers").innerHTML = lineNumbersHTML;
}

你能弄清楚那里发生了什么吗？

Answer 1

似乎代码面板的结构是每行一个<div>，并且某些<div>内容可以以<br>结尾。.innerText将其转换为字符串，以便每个<div>生成一个n，每个<br>也生成一个n。

与其尝试计算n的数量，不如计算<div>的数量。

将函数更改为：

function setUpLineNumbers() {
const assemblyCode = document.getElementById("assemblyCode");
const numberOfLines = assembly.childNodes.length;
let lineNumbersHTML = "";
for (let i = 1; i <= numberOfLines; i++)
lineNumbersHTML += i + ".<br/>";
document.getElementById("lineNumbers").innerHTML = lineNumbersHTML;
}