如何使用 Vanilla JS 根据文本编辑器框中的行动态显示装订线中的行号？

Question

我需要仅使用 vanilla JS 在我的应用程序的侧边栏中打印出准确的行号。

行号必须随着可编辑文本区域中行的添加和删除而自动增加和减少。

目前它正在创建新的 DIV，但新的 <code> 标签会非常棒。不幸的是 <code> 标签打印在同一行上，而不是垂直递增。

我当前的代码如下所示：

html:

<div class="textBox" contenteditable>
  <code>
    This div can be edited in browsers that support HTML5.
  </code>
  <code>
    Please edit this text and add more lines to see what needs to happen.
  </code>
</div>

JS:

  let totalLines = 1;
    function updateGutter(allLines) {
      const toAdd = document.createDocumentFragment();

  for (let i = 0; i < allLines;) {
    i += 1;
    const newDiv = document.createElement('div');
    newDiv.id = 'r' + i;
    newDiv.className = 'ansbox';
    newDiv.innerHTML = `${i}.`;
    toAdd.appendChild(newDiv);
    document.getElementsByClassName('gutter')[0].appendChild(toAdd);
  }
}

function unEqual(linesTotal) {
  if (linesTotal !== totalLines) {
    totalLines = linesTotal;
    updateGutter(totalLines);
  }
}

const getLength = function getLength(element) {
  const linesTotal = element.querySelectorAll('div').length + 1;
  unEqual(linesTotal);
};

const box = document.querySelector('.textBox');
box.addEventListener('keyup', function() {
  getLength(box);
});

但它创建的输出如下所示：

我希望这更能说明问题。 :-) * 还有一个更新的 FIDDLE 在 https://jsfiddle.net/Tranq/heyaxtd5/4/ *

Answer 1

使用一些 CSS Counters 魔法怎么样？

工作fiddle：https://jsfiddle.net/heyaxtd5/2/

CSS:

pre
{
    counter-reset: thecodenumbering;
}

code
{
    counter-increment: thecodenumbering;
}
code:before
{
    padding-right:5px;
    content: counter(thecodenumbering);
}

HTML:

<pre>
    <code>A line of code</code>
    <code>A line of code</code>
    <code>A line of code</code>
    <code>A line of code</code>
    <code>A line of code</code>
</pre>

更新：

稍微更改了您的 JS，它似乎可以正常工作：https://jsfiddle.net/heyaxtd5/5/

如何使用 Vanilla JS 根据文本编辑器框中的行动态显示装订线中的行号？

How to dynamically show line numbers in gutter according to lines in text editor box using Vanilla JS?

javascript

contenteditable

line-numbers