Question

我有一个初始表：

我需要我的表格数据显示如下：

在 <td id="nameOfPeople"> 列中，我的数据如下：

Text Text Number Number Text Text Number Number

所以我需要在像这样的某种模式之后拆分到新行：

Text Text Number Number 
Text Text Number Number

所以我已经尝试过像这样拆分它们：

$(document).ready(function() {
  var enteredText = $("#nameOfPeople").html(); //Get the InnerHTML

    var NumOfOccurrences = (enteredText.match(/\s/g) || []).length; //All the occurrences of space (' ')
    var n = 5; //Initial occurrence
    while(n <= NumOfOccurrences) {
        enteredText = enteredText.replace(RegExp("^(?:.*? ){" + n + "}"), function(val){return val.replace(RegExp(' ' + "$"), "<br>")}); //Replace the occurrence
        n = n+ 10; //Increment by 5 to determine next occurrence
    }
    $("#nameOfPeople").html(enteredText); //Replace the InnerHTML
});

<!DOCTYPE html>
<html>
<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<title></title>
</head>
<body>
<table class="tapshil" id="" border="2px" width="100%">
   <thead>
      <tr>
         <th> <font face="preeti">l;=g+=</font></th>
         <th><font face="preeti"> k|=b=g</font></th>
         <th><font face="preeti"> ldlt</font></th>
         <th><font face="preeti"> eG;f/ dx;'n tyf hl/jfgf</font> </th>
         <th><font face="preeti"> cGtMz'Ns</font></th>
         <th><font face="preeti"> d"=c=s/ </font></th>
         <th><font face="preeti"> hDdf dx;'n</font> </th>
         <th><font face="preeti"> hDdf  </font> </th>
      </tr>
   </thead>
   <tbody>
      <!-- put loop here -->
      <tr>
         <td>1</td>
         <td>11   
            1212231
         </td>
         <td id="nameOfPeople">Arun Lama  2070-01-01 2072-01-01 Amin Shrestha  2070-01-01 2072-01-01
         </td>
         <td>3</td>
         <td>7</td>
         <td>11</td>
         <td>15</td>
         <td id="totalOfAll">36</td>
      </tr>
   </tbody>
</table>
</body>


</html>

Answer 1

您应该尝试使用以下html标记生成表，而不是使用Jquery：

<td id="nameOfPeople">Arun Lama  2070-01-01 2072-01-01 <br> Amin Shrestha  2070-01-01 2072-01-01 </td>

请注意，我已经添加了一个<br>标记以将该行分为2 您也可以在第一列中类似地使用它

Answer 2

使用以下正则表达式：

/(-[0-9]{2})\s+?([a-z]+?)\b/gi

这说：

“第一个捕获组( ...
  文字连字符-
  一位数[0-9]的类范围
  精确到2位数字
  第一个捕获组的结尾... )
  一个或多个空格\s+?的元序列
  第二捕获组( ...
  一个字母[a-z]的类别范围
  一个或多个（懒惰）+?
的定性   第二个捕获组的结尾... )
  元序列词边界\b
  g大写和大小写i不敏感标志”

因此，基本上它将用-2 numbers代替a word和<br>之间的空格。这就是上述模式的全部发生。

将id更改为类，jQuery足够灵活，以至于id实际上是一个障碍。

以下演示：

使用.text()方法提取单元格的文本
使用前面提到的带有replace()的正则表达式插入<br>
最后，我们使用.html()

演示

var text = $('.nameOfPeople').text();

var regex = /(-[0-9]{2})\s+?([a-z]+?)\b/gi;

var string = text.replace(regex, '$1<br>$2');

$('.nameOfPeople').html(string);

<!DOCTYPE html>
<html>

<head>

  <title></title>
</head>

<body>
  <table class="tapshil" id="" border="2px" width="100%">
    <thead>
      <tr>
        <th>
          <font face="preeti">l;=g+=</font>
        </th>
        <th>
          <font face="preeti"> k|=b=g</font>
        </th>
        <th>
          <font face="preeti"> ldlt</font>
        </th>
        <th>
          <font face="preeti"> eG;f/ dx;'n tyf hl/jfgf</font>
        </th>
        <th>
          <font face="preeti"> cGtMz'Ns</font>
        </th>
        <th>
          <font face="preeti"> d"=c=s/ </font>
        </th>
        <th>
          <font face="preeti"> hDdf dx;'n</font>
        </th>
        <th>
          <font face="preeti"> hDdf </font>
        </th>
      </tr>
    </thead>
    <tbody>
      <!-- put loop here -->
      <tr>
        <td>1</td>
        <td>11 1212231
        </td>
        <td class="nameOfPeople">Arun Lama 2070-01-01 2072-01-01 Amin Shrestha 2070-01-01 2072-01-01
        </td>
        <td>3</td>
        <td>7</td>
        <td>11</td>
        <td>15</td>
        <td class="totalOfAll">36</td>
      </tr>
    </tbody>
  </table>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>


</html>

Answer 3

您可以使用class="nameOfPeople"代替id="nameOfPeople".

使用Under js，它将在字符串中每四个字之后添加"<br>"：

<script type="text/javascript">
    $(document).ready(function() 
    {
        alert("inside");
        $( ".nameOfPeople" ).each(function() {
            var html = $(this).html().split(" ");
             html = html.slice(0,4).join(" ") + "<br />" + html.slice(4).join(" ");
             $(this).html(html);
        });
    });
</script>

如何使用javascript / jquery在特定模式后将文本拆分为新行？

3 个答案:

演示