如何使用JavaScript在文本區域內創建有序列表？

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中的文本並將其拆分為新行。
• 現在您有了訂單項，您需要獲取以數字開頭的最后一句話。 但是用戶可以自行輸入新行以設置文本格式。
• 為此，請在每行上循環並驗證其以數字開頭，然后是. 。
• 如果是，請使用子字符串獲取此數字並將其解析為int。 如果找不到匹配項，則可以返回0。
• 這將確保編號系統，並且您不需要變量來保存最后一個值。

注意：此邏輯假定最后一個值將是最大值。 如果您希望處理該問題，則可以只比較n和parseInt並分配最大值

樣品：

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

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

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以更好地了解正在發生的事情。