How to break the at end of line inside<td> in <table> using jquery/javascript?
Question
I have a table as:
$(document).ready(function() { var enteredText = document.getElementById("textArea").value; var numberOfLineBreaks = (enteredText.match(/\\n/g)||[]).length; var characterCount = enteredText.length + numberOfLineBreaks; alert('Number of breaks: ' + numberOfLineBreaks); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!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 id="textArea">भैरवा भन्सार 2070-01-01 2072-01-01 बिराटनगर भन्सार 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>
In my UI it is appearing as:
In my table there is one data coming in as:
<td id="textArea">भैरवा भन्सार 2070-01-01 2072-01-01 बिराटनगर भन्सार 2070-01-01 2072-01-01
</td>
I want to split after भैरवा भन्सार 2070-01-01 2072-01-01 and bring बिराटनगर भन्सार 2070-01-01 2072-01-01 into new line but it is not coming.IN my UI it is coming in straight line. How can i break it into new line? I want my output be like:
<td id="textArea">भैरवा भन्सार 2070-01-01 2072-01-01
बिराटनगर भन्सार 2070-01-01 2072-01-01
</td>
1 answers
solution1
0 ACCPTED 2019-02-12 14:17:01
I suggest not to format the text using Javascript/JQuery, but to format it while it is rendered.
Assuming based on your example that, you have a fixed format (shown below) of the text displayed in your <td> tag, you can parse the text with space (' ') and format it as per your display requirements.
Fixed format: firstName lastName Date1 Date2 firstName lastName Date1 Date2 ...
Solution:
<script>
$(document).ready(function() {
var enteredText = $("#textArea").html(); //Get the InnerHTML
var NumOfOccurrences = (enteredText.match(/\s/g) || []).length; //All the occurrences of space (' ')
var n = 3; //Initial occurrence
while(n <= NumOfOccurrences) {
enteredText = enteredText.replace(RegExp("^(?:.*? ){" + n + "}"), function(val){return val.replace(RegExp(' ' + "$"), "<br>")}); //Replace the occurrence
n = n+ 2; //Increment by 2 to determine next occurrence
}
$("#textArea").html(enteredText); //Replace the InnerHTML
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.