Question

   var payload="Online  111:220:9
info  111:220:9
Connected FW build date: May  5 2017 10:56:36  111:222:9
WIFI AP SSID: :), BSSID: Q8:2G:63:14:61:40, SIGNAL: -55  121:250:1
WIFI interface mode: 11N, MAC: 1A:CH:7F:12:03:995  111:220:5
IP: 179.19.199.199, MASK: 255.255.255.0, GW: 179.19.111.259";

     var arr = payload.split(/\n/g);
     var ss="koikpay";
     var sa=0;
     arr.forEach(function(entry) {
         sa++;
         ss=ss+sa;
         document.body.innerHTML += '<span class="'+ss+'">' + entry + '</span>'
    });

我想为每一行数组创建新的html类。

这个例子很遗憾地不起作用！

我可以使用forEach对此进行归档，还是必须使用循环？

Answer 1

你有两个问题。首先，当字符串文字包含换行符时，您需要使用反引号（`）字符来分隔字符串。

第二个问题是您在每个循环上更新ss，因此该值将变为foo1，foo12，foo123 ...您需要修改仅限循环范围内的值。更好的是，您可以使用提供给index处理程序的forEach()参数。试试这个：

var payload = `Online  111:220:9
info  111:220:9
Connected FW build date: May  5 2017 10:56:36  111:222:9
WIFI AP SSID: :), BSSID: Q8:2G:63:14:61:40, SIGNAL: -55  121:250:1
WIFI interface mode: 11N, MAC: 1A:CH:7F:12:03:995  111:220:5
IP: 179.19.199.199, MASK: 255.255.255.0, GW: 179.19.111.259`;

var arr = payload.split(/\n/g);
var ss = "koikpay";

arr.forEach(function(entry, sa) {
  document.body.innerHTML += '<span class="' + ss + sa + '">' + entry + '</span>'
});

Answer 2

您可以在每次迭代中创建一个新类，如下所示：

var arr =  ["cat","dog","ball","bat"] 
var ss = "class_prefix_";
var sa = 0;
arr.forEach(function(entry)
{
         sa++;
         ss=ss+sa;
         document.getElementById('data').innerHTML += '<span class="'+ss+'">' + entry + '</span><br/>'
    });

<div id="data">

</div>

这里arr将是你的阵列。

Answer 3

使用模板文字来保存您的文字：

var payload=`Online  111:220:9
info  111:220:9
Connected FW build date: May  5 2017 10:56:36  111:222:9
WIFI AP SSID: :), BSSID: Q8:2G:63:14:61:40, SIGNAL: -55  121:250:1
WIFI interface mode: 11N, MAC: 1A:CH:7F:12:03:995  111:220:5
IP: 179.19.199.199, MASK: 255.255.255.0, GW: 179.19.111.259`;

     var arr = payload.split(/\n/g);
     var ss="koikpay";
     var sa=0;
     arr.forEach(function(entry) {
         sa++;
         var className = ss+sa;
         document.body.innerHTML += '<span class="'+className+'">' + entry + '</span>'
    });

注意反引号for the string above. I also corrected an error you had in the loop where you were updating the ss`变量导致您的类命名以错误的方式连接。

Answer 4

const payload = `Online  111:220:9
info 111: 220: 9
Connected FW build date: May 5 2017 10: 56: 36 111: 222: 9
WIFI AP SSID:: ), BSSID: Q8: 2 G: 63: 14: 61: 40, SIGNAL: -55 121: 250: 1
WIFI interface mode: 11 N, MAC: 1 A: CH: 7 F: 12: 03: 995 111: 220: 5
IP: 179.19 .199 .199, MASK: 255.255 .255 .0, GW: 179.19 .111 .259`;

const arr = payload.split(/\n/g);
const className = "koikpay";

arr.forEach((entry, index) => {
  document.body.innerHTML += `<div class="${className}-${index}">${entry}</div>`
});

.koikpay-0 {
  color: limegreen;
}

.koikpay-1 {
  color: red;
}

.koikpay-2 {
  color: green;
}

.koikpay-3 {
  color: blue;
}

.koikpay-4 {
  color: gold;
}

.koikpay-5 {
  color: rebeccapurple;
}

Answer 5

ES6使用多线字符串的``（Template Literal）表示法解决了这种特殊情况。其他方法是在字符串中使用\n来表示新行，或者如果它只是相同的字符串但编辑器的宽度较小，则可以使用\在同一字符串中追加多行。可能希望看到片段 -

/*ES6*/
var payload1=`Online  111:220:9
info  111:220:9
Connected FW build date: May  5 2017 10:56:36  111:222:9
WIFI AP SSID: :), BSSID: Q8:2G:63:14:61:40, SIGNAL: -55  121:250:1
WIFI interface mode: 11N, MAC: 1A:CH:7F:12:03:995  111:220:5
IP: 179.19.199.199, MASK: 255.255.255.0, GW: 179.19.111.259`;

     var arr = payload1.split(/\n/g);
     var ss="koikpay";
     var sa=0;
     arr.forEach(function(entry) {
         sa++;
         ss=ss+sa;
         document.body.innerHTML += '<div class='+ss+'>' + entry + '</div>'
    });
    
    
 /*Simple New Liner notation*/   
 var payload2="Online  111:220:9 \n" + 
             "info  111:220:9";


     var arr = payload2.split(/\n/g);
     var ss="koikpay";
     var sa=0;
     arr.forEach(function(entry) {
         sa++;
         ss=ss+sa;
         document.body.innerHTML += '<div class='+ss+'>' + entry + '</div>'
    });
    
    /*String in multiple lines*/
    var payload3="Online  111:220:9 \
info  111:220:9 \
Connected FW build date: May  5 2017 10:56:36  111:222:9 \
WIFI AP SSID: :), BSSID: Q8:2G:63:14:61:40, SIGNAL: -55  121:250:1 \
WIFI interface mode: 11N, MAC: 1A:CH:7F:12:03:995  111:220:5 \
IP: 179.19.199.199, MASK: 255.255.255.0, GW: 179.19.111.259";

     var arr = payload3.split(/\n/g);
     var ss="koikpay";
     var sa=0;
     arr.forEach(function(entry) {
         sa++;
         ss=ss+sa;
         document.body.innerHTML += '<div class='+ss+'>' + entry + '</div>'
    });

.koikpay1{
  background-color:red;
}

另请注意，该索引已在.forEach(entry, index, array)中提供，因此无需var sa来跟踪索引。

如何使用foreach创建新的html类？

5 个答案: