Question

我有一个文本区域，我点击按钮添加订单列表项目。这是我的代码，

var addListItem = function() {
  if (!this.addListItem.num) {
    this.addListItem.num = 0
  }
  ++this.addListItem.num;
  var text = document.getElementById('editor').value;
  console.log('text', text);
  var exp = '\n' + this.addListItem.num + '.\xa0';
  text = text.concat(exp);
  document.getElementById('editor').value = text;
}

<div>
  <button onclick="addListItem()">NumberList</button>
  <textarea id="editor" col=10 rows=10></textarea>
</div>

因为我使用静态变量来增加每次点击的增量，所以如果我删除列表并再次创建一个新列表它不会从'1'开始，我也无法弄清楚如何更新数字时一个项目被添加到其中。有人可以建议我如何解决这个问题吗？

Answer 1

如果您删除列表并再次创建新列表，它将从“1”开始。
也可以从最后一个数字算起。

var addListItem = function() {
  if (!this.addListItem.num) {
    this.addListItem.num = 0
  }
  ++this.addListItem.num;
  var text = document.getElementById('editor').value;

  //HERE start new counting if textarea is empty
  if(text.trim() == ''){
      this.addListItem.num = 1;  //restart counting here
  }
 //else check if textarea has previous numbers to proceed counting
 else {
    var lastLine = text.substr(text.lastIndexOf("\n") + 1).trim();
    this.addListItem.num = parseInt(lastLine.slice(0, -1)) + 1; //add 1 to last number
 }

  console.log('text', text);
  var exp = '\n' + this.addListItem.num + '.\xa0';
  text = text.concat(exp);
  document.getElementById('editor').value = text;
}

<div>
  <button onclick="addListItem()">NumberList</button>
  <textarea id="editor" col=10 rows=10></textarea>
</div>

Answer 2

您可以尝试这样的事情：

逻辑：

每次点击，在textarea中获取文本并将其拆分为新行。
现在您有了订单项，您需要获取以数字值开头的最后一句话。但是用户可以自己输入新行来格式化文本。
为此，循环每一行并验证它以数字开头，后跟.。
如果是，请使用substring获取此数字并将其解析为int。如果未找到匹配项，则可以返回0。
这将确保编号系统，您不需要变量来保存最后一个值。

注意：此逻辑假定最后一个值为最大值。如果您希望处理该问题，则只需比较n和parseInt并指定最大值

<强>示例：

＆＃13;

var addListItem = function() {
  var text = document.getElementById('editor').value;
  var exp = '\n' + (getLastNumber(text) + 1) + '.\xa0';
  text = text.concat(exp);
  document.getElementById('editor').value = text;
}

function getLastNumber(str){
  var list = str.split(/[\r\n]/g);
  var n = 0;
  list.forEach(function(s){
    if(/^\d+\./.test(s)){
      n = parseInt(s.substring(0, s.indexOf(".")));
    }
  });
  return n;
}

＆＃13;

<div>
  <button onclick="addListItem()">NumberList</button>
  <textarea id="editor" col=10 rows=10></textarea>
</div>

＆＃13;

Answer 3

如果您想要一个处理各种不同情况的更强大的解决方案，您可以使用正则表达式来检测列表中的数字。

此解决方案还允许用户输入他们自己的号码，按钮点击“仍然无效！”

那是因为这个解决方案使用文本区域内容作为事实来源，而不是跟踪侧面的状态。

var addListItem = function() {
  var text = document.getElementById('editor').value;
  // regex to match against any new line that has a number and a period
  // and extracts the number. feel free to use regex101.com to understand
  // this in more depth.
  var listNumberRegex = /^[0-9]+(?=\.)/gm;
  var existingNums = [];
  var num;
  // get all the matches
  while ((num = listNumberRegex.exec(text)) !== null) {
    existingNums.push(num);
  }
  
  // sort the values
  existingNums.sort();

  // use the existing biggest number + 1 or use 1.
 
  var addListItemNum;
  if (existingNums.length > 0) {
    // get last number and add 1
    addListItemNum = parseInt(existingNums[existingNums.length - 1], 10) + 1;
  } else {
    // otherwise if there's nothing, just use 1.
    addListItemNum = 1;
  } 

  var exp = '\n' + addListItemNum + '.\xa0';
  text = text.concat(exp);
  document.getElementById('editor').value = text;
}

<div>
  <button onclick="addListItem()">NumberList</button>
  <textarea id="editor" col=10 rows=10></textarea>
</div>

理解正则表达式很棘手，随时可以查看https://regex101.com/r/gyX7oO/1以更好地了解正在发生的事情。

如何使用javascript在文本区域内创建有序列表？

3 个答案:

逻辑：