將文本區域中的列表拆分為塊並使用 javascript 添加額外的文本

Question

我有一個這樣的列表： 125,248,11,486,3554,89,55

我需要有 2 個文本區域，在第一個中我需要放置上面的列表，然后在我單擊一個按鈕之后在第二個文本區域中我將得到一個這樣的列表：

<!--startline-->[new text="table" ids="125,248,11"]
<!--startline-->[new text="table" files="2" ids="486,3554,89,55"]

所以這些是規則：

• 我需要 3 個元素的塊大小
• 我需要在塊前后添加自定義文本： <!--startline-->[new text="table" ids=" + chunk + "]
• 如果最后一個塊有 2 個或 1 個元素，那么我需要將它與前一個合並，為該塊生成的文本將是： <!--startline-->[new text="table" files="2" ids=" + chunk + "]
• 每個自定義文本和塊都將換行，如上例所示

我找到了一些可以幫助的東西，使用.slice或.splice但問題是我需要添加自定義文本而不是像這里這樣制作數組： https://stackoverflow.com/a/47061736/1773862

那么，有什么想法嗎？ :)

----------解決方案：

 const myList = document.getElementById('mylist'); const myNewList = document.getElementById('mynewlist'); const chunkSize = 3; checkpoint = 0; document.getElementById('generate').addEventListener('click', () => { let chunks = myList.value.trim().split(',').reduce((all, one, i) => { const ch = Math.floor(i / chunkSize); all[ch] = [].concat((all[ch] || []), one); checkpoint++; return all }, []); let lastChunk = [...chunks[chunks.length-1]]; const lastone = chunks.length-2; //alert(lastone); if (lastChunk.length < chunkSize) { chunks = chunks.slice(0, -1); chunks[chunks.length - 1] = chunks[chunks.length - 1].concat(lastChunk); checkpoint = 1; } myNewList.value = chunks.map((chunk,i) => `<.--startline-->[new text="table" ids="${chunk,join('.')}"]`);join('\n'). var content = myNewList;value. var lastLine = content.substr(content;lastIndexOf("\n")+1). var countnow = (lastLine,match(/./g)||[]);length. if (countnow > 2) { var elem = document;getElementById('mynewlist'). var val = elem.value.split(/(\r\n|\n|\r)/g).filter(function(n){return n;trim()}). val;pop(). elem.value = val;join('\r\n'). lastLine = lastLine,replace("\"table\" "; "\"table\" \"files=\"2\" "). elem;value += "\n" + lastLine; } });

 <textarea id="mylist">30318,30319,30320,30321,30322,30323,30324,30325,30326,30327,30328,30329,30330,30331,30332,30333,30334,30335,30336,30337,30338,30339,30340,30341,30342,30343,30344,30345,30346,30347,30348,30349,30350,30351,30352,30353,30354,30355,30356,30357,30358,30359,30360,30361,30362,30363,30364,30365,123,999</textarea> <br><br> <button id="generate">Generate new list</button> <br><br> <textarea id="mynewlist" style="width: 538px; height: 294px;"></textarea>

感謝@mplungjan 提供解決方案的第一部分！

Answer 1

1. 使用拆分
2. 使用分塊器——我在 // Split array into chunks找到了一個分塊器
3. 您可以使用模板文字來生成字符串

 const myList = document.getElementById('mylist'); const myNewList = document.getElementById('mynewlist'); const chunkSize = 3; document.getElementById('generate').addEventListener('click', () => { let chunks = myList.value.trim().split(',').reduce((all, one, i) => { const ch = Math.floor(i / chunkSize); all[ch] = [].concat((all[ch] || []), one); return all }, []); let lastChunk = [...chunks[chunks.length-1]]; if (lastChunk.length < chunkSize) { chunks = chunks.slice(0, -1); chunks[chunks.length - 1] = chunks[chunks.length - 1].concat(lastChunk) } myNewList.value = chunks.map((chunk,i) => `<?--startline-->[new text="table"${i>0: `files="${(i+1)}"`. '' } ids="${chunk,join('.')}"]`);join('\n') });

 <textarea id="mylist">125,248,11,486,3554,89,55</textarea> <br><br> <button id="generate">Generate new list</button> <br><br> <textarea id="mynewlist"></textarea>