显示每行的数字不起作用答案

【问题标题】：Displaying number for each line not working显示每行的数字不起作用
【发布时间】：2019-09-17 14:43:42
【问题描述】：

我正在尝试显示每行的编号，并通过单击按钮将给定值添加到输入中。例如：

Anna
George
John
Doe

会变成

1,Anna
2,George
3,John
4,Doe

我尝试了以下代码，但它似乎不起作用：

function addNumber() {
  var content = document.getElementById('myTextArea').value;
  var line = 1;
  var replaced = content.replace(/^/gm, function() {
  return '<span class="line-number-position">&#x200b;<span class="line-number">' + line++ + '</span></span>';
  })
}

<textarea id="myTextArea"></textarea>
<button onclick="addNumber()">CLICK ME</button>

【问题讨论】：

也许你想要这样的东西？ JsFiddle Demo 不需要line 变量，您只需+1 循环递增i
@NewToJS 这太棒了！非常感谢。知道如何添加输入值吗？例如。 1234,1,1,Anna，其中 1234,1 是给定值。
我不明白你的意思。你能给我一个工作的例子吗？
@NewToJS 类似这样的东西：jsfiddle.net/jd27xpuh
您有多个 textarea 元素。你能解释一下你对客户输入和预期结果的期望吗？也许如果我了解预期的步骤和结果，我也许可以让事情变得更简单。

标签： javascript html list multiline

【解决方案1】：

试试这个。

function addNumber() {
  var content = document.getElementById('myTextArea').value;
  var line = 1;
  var replaced = content.replace(/[0-9],/g, '').replace(/^/gm, function() {
  return line++ +',';
  })
  document.getElementById('myTextArea').value=replaced
}

<textarea id="myTextArea"></textarea>
<button onclick="addNumber()">CLICK ME</button>

【讨论】：

这是一个很好的答案，但如果您多次单击该按钮，它将再次添加行数。也许如果您在.replace(/^/gm, function() { 之前添加content.replace(/[0-9],/g, '') 这会更好吗？ JsFiddle Example如果您认为这些更改会让事情变得更好，请随时更新您的答案。