分割字符串并使用javascript相应地显示结果？

Question

我有包含重复字符串组合的数据。

var data = 01.01.2019 11:11:39 Sahil Dhir(K21004)  test1, 
    02.01.2019 14:10:02 Rahul Kumar(K210005)  test2,
    03.01.2019 15:52:36 Jhonny Sins(K21006) test3,
04.01.2019 15:52:36 Mahendra Bahubali(K21006) test4

我想以表格或div格式显示数据。

这是我到目前为止尝试过的。

var data = `01.01.2019 11:11:39 Sahil Sharma(K21004)  test1, 
    02.01.2019 14:10:02 Rahul Verma(K210005)  test2,
    03.01.2019 15:52:36 Shikha Kappor(K21006) test3,
04.01.2019 15:52:36 Mahendra Bahubali(K21006) test4`;
    var arr = new Array();
    arr = data.split(',');
    var result = " " ;
    for(var i=0; i<arr.length; i++){
    result += ""+arr[i]+"";
    }
    console.log(result);
    var e = "";
    e = result.split(/[]+/);
    document.getElementById('print').innerHTML = "<span>"+e+ "</span></br>";

<div id="print"></div>

我需要分割已经分割的字符串。

Answer 1

通过这种方式，您可以根据需要拆分字符串。如果需要，可以按空格分别拆分splitArray值，并根据需要创建表。

var data = `01.01.2019 11:11:39 Sahil Sharma(K21004)  test1, 
    02.01.2019 14:10:02 Rahul Verma(K210005)  test2,
    03.01.2019 15:52:36 Shikha Kappor(K21006) test3,
04.01.2019 15:52:36 Mahendra Bahubali(K21006) test4`;


data = data.replace(/\n/g, ' ');
data = data.replace(/\s+/g, ' ');
data = data.replace(/\(/g, ' (');
data = data.replace(/\,\s+/g, ',');

let splitArray = data.split(',');

console.log(JSON.stringify(splitArray))

let text = ''

for(let a = 0; a < splitArray.length; a++ ) {

  text += splitArray[a].split(' ').join(' | ') + '</br>';

}

document.getElementById('print').innerHTML = text

<div id="print"></div>

Answer 2

如果数据完全相同，则可以自由分割并获取元素。如果数据结构发生变化-这将无法正常工作。请注意，我已经修改了数据-从代码中删除了前导空格和换行符。

以下内容创建了一系列对象，然后可以对其进行迭代以提供表结构-每个对象都包含数据项的各个部分。

var data = `01.01.2019 11:11:39 Sahil Sharma(K21004)  test1,02.01.2019 14:10:02 Rahul Verma(K210005)  test2,03.01.2019 15:52:36 Shikha Kappor(K21006) test3,04.01.2019 15:52:36 Mahendra Bahubali(K21006) test4`;
  var newArr = [];

    var  arr = data.split(',');
        
    arr.forEach(function(item){
      var newObj = {};
      var portions = item.split(' ');
      newObj['date'] = portions[0];
      newObj['time'] = portions[1];
      newObj['firstName'] = portions[2];
      newObj['lastName'] = portions[3].split('(')[0];
      newObj['code'] = portions[3].split('(')[1].split('\)')[0];
      newObj['test'] = item.split(')')[1].trim();
      newArr.push(newObj)
    });
    
    var tableStr = '';
    
    newArr.forEach(function (item){
    tableStr += '<tr>';
      tableStr += '<td>' + item.date + '</td>';
      tableStr += '<td>' + item.time + '</td>';
      tableStr += '<td>' + item.firstName + '</td>';
      tableStr += '<td>' + item.lastName + '</td>';
      tableStr += '<td>' + item.code + '</td>';
      tableStr += '<td>' + item.test + '</td>';
    tableStr += '</tr>';
    
    })
    
    document.querySelector('#data-table tbody').innerHTML = tableStr;

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
  text-align: left;
  padding: 5px 10px;
}

<table id="data-table" >
  <thead>
    <tr>
      <th>Date</th>
      <th>Time</th>
      <th>First name</th>
      <th>Last Name</th>
      <th>PID</th>
      <th>Test No.</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Answer 3

分割并加入.processed

(

var data = '01.01.2019 11:11:39 Sahil Sharma(K21004)  test1, 02.01.2019 14:10:02 Rahul Verma(K210005)  test2,03.01.2019 15:52:36 Shikha Kappor(K21006) test3,04.01.2019 15:52:36 Mahendra Bahubali(K21006) test4';
    var arr = new Array();
    arr = data.split(',');
    var result = " " ;
    for(var i=0; i<arr.length; i++){
    var e = "";
    e = " "+arr[i].split('(').join(" (")+" ";
   
    document.getElementById('print').innerHTML+= "<span>"+e+ "</span></br>";
    }

Answer 4

在, space和(上分割数据。

processedArray将包含纯净元素，您可以对其进行迭代以将其添加到表中。

let data = `01.01.2019 11:11:39 Sahil Sharma(K21004)  test1, 
    02.01.2019 14:10:02 Rahul Verma(K210005)  test2,
    03.01.2019 15:52:36 Shikha Kappor(K21006) test3,
04.01.2019 15:52:36 Mahendra Bahubali(K21006) test4`;
let rows = data.split(",")
let array = [];
let elem;
let processedArray = [];
rows.forEach(function(row){
    array.push(row.trim().split(" "));
});
array.forEach(function(i){
    for(j = 0; j < i.length; j++){
        if(i[j] !== ""){
            elem = i[j].split("(");
            elem.forEach(function(k){
                processedArray.push(k.replace(")",""));
            });
        }
    }
});
console.log(processedArray);

Answer 5

尝试类似这样的方法将内容添加到表中：

 <div id="content">content</div>


 <script>
        String.prototype.insert = function (index, string) {
  if (index > 0)
    return this.substring(0, index) + string + this.substring(index, this.length);

  return string + this;
};
        var data = "01.01.2019 11:11:39 Sahil Dhir(K21004)  test1,02.01.2019 14:10:02 Rahul Kumar(K210005)  test2,03.01.2019 15:52:36 Jhonny Sins(K21006) test3,04.01.2019 15:52:36 Mahendra Bahubali(K21006) test4";

var position = data.indexOf('(');
data= data.insert(position, " ");
while (position !== -1) {

  position = data.indexOf('(', position + 2);
  data= data.insert(position, " ");
}
var sp=data.split(',');
var text="<table>";
text+="<tr><th>date</th><th>time</th><th>first name</th><th>last name</th><th>pin</th><th>test no</th></tr>";
for (var i=0;i<sp.length;i++){
    text+="<tr>";
    var spi=sp[i].split(" ");
    for(var j=0;j<spi.length;j++){
        text+="<td>"+spi[j]+"</td>";
    }
    text+="</tr>";
}
text+="</table>";
document.getElementById('content').innerHTML = text;
    </script>