我有一個 html 文本區域，我在其中粘貼文本行，每 11 行遵循一個重復模式。我想要實作的是遍歷前 11 行，處理每一行，然后回圈接下來的 11 行并在這 11 行上執行相同的程序。我已將這些行分成每行 11 行的塊。
問題：每個塊回圈 12 次，沒有輸出到其他文本區域。
不知道我是否正確地做到了這一點，
<!doctype html>
<html>
<head>
</head>
<body>
<textarea id="txtinput" class="txtinput" cols="150" rows="15"></textarea>
<br />
<button id="btn-pro">PROCESS</button> <button id="cleartxt">CLEAR</button>
<br />
<br />
<textarea id="txtoutput" class="txtinput" cols="150" rows="15"></textarea>
<script type="text/javascript">
var input = document.querySelector('#cleartxt');
var btnClick = document.querySelector('#btn-pro');
var textarea = document.querySelector('.txtinput');
input.addEventListener('click', function () {
textarea.value = '';
}, false);
//
//
btnClick.addEventListener('click', function () {
var textArea = document.getElementById("txtinput");
var lines = textArea.value.split("\n");
for(var i = 0;i <= lines.length;i =11){
const chunk = lines.slice(i, i 11);
chunk.push(chunk);
console.log(chunk);
//
for (const key in chunk) {
console.log('XXXXXXXXXXXXX: ' chunk[0]);
var L1 = chunk[0];
var L2 = chunk[1];
var L3 = chunk[2];
var L4 = chunk[3];
var L5 = chunk[4];
var L6 = chunk[5];
var L7 = chunk[6];
var L8 = chunk[7];
var L9 = chunk[8];
var L10 = chunk[9];
var L11 = chunk[10];
console.log('Line 1: ' L1 '\nLine 3: ' L2 '\nLine 3: ' L3 '\nLine 4: ' L4 '\nLine 5: ' L5 '\nLine 6: ' L6 '\nLine 7: ' L7 '\nLine 8: ' L8 '\nLine 9: ' L9 '\nLine 10: ' L10 '\nLine 11: ' L11);
//
document.getElementById("txtoutput").value = L1;
}
}
}, false);
</script>
</body>
</html>
我的文本區域是這樣的：
<textarea>
AAAA
BBBB
CCCC
DDDD
EEEE
FFFF
GGGG
HHHH
IIII
JJJJ
KKKK
AAAA
BBBB
CCCC
DDDD
EEEE
etc...
etc...
</textarea>
uj5u.com熱心網友回復：
你為什么要嘗試將塊推入自身？
const chunk = lines.slice(i, i 11);
chunk.push(chunk);
console.log(chunk);
uj5u.com熱心網友回復：
您可以使用splice()創建一個包含另一個陣列塊的陣列。
var input = document.querySelector('#cleartxt');
var btnClick = document.querySelector('#btn-pro');
var textarea = document.querySelector('.txtinput');
input.addEventListener('click', function() {
textarea.value = '';
}, false);
btnClick.addEventListener('click', function() {
var textArea = document.getElementById("txtinput");
var lines = textArea.value.split("\n");
let len = 11, all = []
while (lines.length>0) all.push(lines.splice(0,len));
document.getElementById("txtoutput").value = all[0][1];
})<textarea id="txtinput" class="txtinput" cols="150" rows="15">
1
12
123
1234
12345
123456
1234567
12345678
123456789
12345678910
1234567891011
123456789101112
a
ab
abc
abcd
abcde
abcdef
abcdefg
abcdefgh
abcdefghi
abcdefghij
abcdefghijk
abcdefghijkl
abcdefghijklm
abcdefghijklmnop
</textarea>
<br />
<button id="btn-pro">PROCESS</button> <button id="cleartxt">CLEAR</button>
<br />
<br />
<textarea id="txtoutput" class="txtinput" cols="150" rows="15"></textarea>uj5u.com熱心網友回復：
我已經找到了原始問題的解決方案。使用海報提供的代碼片段，我添加了一個 for 回圈，然后添加了一個 forEach() 回圈函式。雖然它確實在控制臺中顯示了一個錯誤，說 item[1] 未定義，但輸出是我想要實作的。可能有一種更簡單的方法可以做到這一點。
<!doctype html>
<html>
<head>
</head>
<body>
<textarea id="txtinput" cols="150" rows="15">
one
two
three
four
five
six
seven
eight
nine
ten
eleven
one
two
three
four
five
six
seven
eight
nine
ten
eleven
one
two
three
four
five
six
seven
eight
nine
ten
eleven
</textarea>
<br />
<button id="btn-pro">PROCESS</button> <button id="cleartxt">CLEAR</button>
<br />
<br />
<textarea id="txtoutput" cols="150" rows="15"></textarea>
<script type="text/javascript">
var input = document.querySelector('#cleartxt');
var btnClick = document.querySelector('#btn-pro');
var textarea = document.querySelector('.txtinput');
input.addEventListener('click', function () {
textarea.value = '';
}, false);
//
//
btnClick.addEventListener('click', function () {
var textArea = document.getElementById("txtinput");
var lines = textArea.value.split("\n");
let len = 11, all = []
while (lines.length>0) all.push(lines.splice(0,len));
console.log(all);
//
for(let i = 0; i <all.length; i ){
all.forEach(function(item){
console.log(item);
var output;
output = '\n{\n\tkeyName: "' item[0] '",';
output = '\n\tkeyName2: "' item[1] '",';
output = '\n\tkeyName3: "' item[2] '",';
output = '\n\tkeyName4: "' item[3] '",';
output = '\n\tkeyName5: "' item[4] '",';
output = '\n\tkeyName6: "' item[5] '",';
output = '\n\tkeyName7: "' item[6] '",';
output = '\n\tkeyName8: "' item[7] '",';
output = '\n\tkeyName9: "' item[8] '",';
output = '\n\tkeyName10: "' item[9] '",';
output = '\n\tkeyName11: "' item[10] '"';
output = '\n},';
document.getElementById("txtoutput").value = output;
});
}
}, false);
</body>
</html>
注意：輸出中的最后一個逗號需要手動洗掉。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/420349.html
標籤：