"innerText“有时包含的换行数超过用户按enters键的数量

Question

我正在尝试在JavaScript中构建一个PicoBlaze simulator，用户可以在其中输入汇编代码。我已经尝试制作了一个界面，它显示用户输入的汇编代码中的行号，并按语法突出显示汇编代码。但是，在某些情况下，行编号不能正常工作。如果您使用contenteditable单击用户应该在其中键入汇编代码的div (称为assemblyCode)，并按两次enter键，它将声称有四行代码，即使只有三行。控制留给它的显示代码行的div的JavaScript (称为lineNumbers)如下所示：

      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;
}