How to split text into new row after a certain pattern using javascript/jquery?

javascript split regex
how do i split a string with multiple separators in javascript
regex split multiple delimiters javascript
javascript regex
javascript split string at index
javascript substring
javascript replace
javascript parse text

I have a initial table which is :

enter image description here

I need my table data to appear like this:

enter image description here

Here in column <td id="nameOfPeople"> My data is coming as :

Text Text Number Number Text Text Number Number

So i need to split to new row after a certain pattern like this:

Text Text Number Number 
Text Text Number Number

So I have tried like this to split them :

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

JavaScript, HTML � CSS � JavaScript � PHP � JQuery String split() Method: The str.split() function is used to split the given string into array of strings by separating it into substrings using a specified separator provided in the argument. body style = " text-align:center;" id = "body" > How to put string in array, split by new line in PHP ? That's all occurrences of said pattern. Changed ids to classes, jQuery is flexible enough that ids are actually a hinderance. The following demo: Extracts the cell's text with .text() method. Uses the previously mentioned regex with replace() to insert a <br> Finally we render the new htmlString into the cell with .html()

Instead of using Jquery you should try generating the table with the following html mark-up:

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

Notice that i have added a <br> tag to break the line into 2 You can use it similarly on your first column too

How to remove portion of a string after certain character in JavaScript, HTML � CSS � JavaScript � PHP � JQuery It specifies the character, or the regular expression, to use for splitting the string. Return value: It returns a new string containing the extracted characters. uses the substring() method to remove the portion of the string after certain character (?). body style = "text-align:center;" >. first we have a string seperated by '~' signs and an array of keys.The second replace function is using [^~]+ to match each different part (i.e. '123 Street', 'Apt 4', etc) and calls the function for each part, passing it as the argument.

You can use class="nameOfPeople" instead of id="nameOfPeople".

Use Below js which will add "<br>" after every 4 words from string:

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

String.prototype.split(), The split() method divides a String into an ordered list of substrings, puts these The division is done by searching for a pattern; where the pattern is provided as the Any leftover text is not included in the array at all. An Array of strings, split at each point where the separator occurs in the given string. Default (Inf) uses all possible split positions. For str_split_fixed , if n is greater than the number of pieces, the result will be padded with empty strings. For str_split_n , n is the desired index of each element of the split string .

Multi-Line JavaScript Strings, Multi-line JavaScript strings can be created by adding a backslash at the end of at the end lines, so creating multiline strings usually ends up looking Just another nice tip to add to your JavaScript arsenal! I forgot about this implementation till this morning while I was working on some jQuery forms. A table-valued function that splits a string into rows of substrings, based on a specified separator character. Compatibility level 130 STRING_SPLIT requires the compatibility level to be at least 130.

Javascript Split String() Method, Javascript Split String: Searching for how do i split string javascript, In this article we 3.4 By slash using regular expression(regex) pattern; 3.5 split string at index 3.15 On a given index and return the values using the string split js method console.log(separators.join('|')); var result = delimiter.split(new� A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

JavaScript String split() Method, The split() method is used to split a string into an array of substrings, and returns the number of splits, items after the split limit will not be included in the array� A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

Comments
  • Is html table Creation is dynamic? there are multiple <tr>?
  • Your approach works fine. What else do you need?
  • First, don't use id="nameOfPeople" change to <td class='nameOfPeople'> and use $(".nameOfPeople").each(function() { var enteredText = $(this).text(); ...
  • Hi, welcome to SO. Please take the time to read the tour and How to Ask.
  • You've provided a requirement, and a solution - but not provided us with what the problem is. What specifically are you having difficulty with? What is not working with the solution that you already have?
  • in your snippet it is coming fine but in my code it is generated by JSTL (java).. so i think <br> is not appearing. i want to clear that <td> so i tried $(".tapshil tbody tr td .nameOfPeople").text(''); and want to replace by your code but <td> is not being empty
  • @AshwinKarki Did you change id="nameOfPeople" to class="nameOfPeople"? If you haven't then $("#nameOfPeople") should work.
  • yes i have changed but i have thought to clear my data first and will be replaced by your code.I tried to clear that <td> after page is loaded and added $(".tapshil tbody tr td .nameOfPeople").text(''); inside script but it is not clearing
  • it feels so bad to see output not coming as u have worked so hard :(
  • Are you using single quotes or one double quote in .text('')? can't tell... Wrap your code with backticks: ``` it'll format it into monospace font, it'll be easier for my old eyes.👀
  • the output is coming as : Arun lama 2070-01-01 <br> 2072-01-01 Amin Shrestha 2070-01-01 2072-01-01
  • hello sir,i think i have seen my one fault: initially in table it is appearing as Text_text__number_number where to illustate you: _ is single space and __is double space
  • @AshwinKarki yes there is one extra space
  • thank you for the effort new to SO plz upvote my question :)