使用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 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>";
    }

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

Answer 3

在, 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 4

尝试像这样在表格中添加内容：

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

Answer 5

如果数据都相同 - 您可以随意拆分并获取元素。如果数据结构发生变化 - 这将不起作用。请注意，我已经修改了数据 - 从您的代码中删除前导空格和换行符。

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

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>