How to insert a newline character after every 200 characters with jQuery

Question

I have a textbox that I use to insert some information. I want to insert a newline character after every 200 characters using jQuery or JavaScript.

For instance:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

In this example, I want to insert a newline chracter after every 200 characters. How can I do this?

Why you are trying to do this? – Derek Adair Dec 01 '10 at 05:39 — Derek Adair, Dec 01 '10 at 05:39

score 25 · Accepted Answer · answered Dec 01 '10 at 05:42

25

Break the string after every 200 characters, add a newline, and repeat this process with the remaining string:

function addNewlines(str) {
  var result = '';
  while (str.length > 0) {
    result += str.substring(0, 200) + '\n';
    str = str.substring(200);
  }
  return result;
}

answered Dec 01 '10 at 05:42

casablanca

68,094
7
131
148

1

Could be improved by giving more options and using hyphens when starting a new line. See my improvements in my [comparison](http://jsfiddle.net/tLp7P/) – James Cameron Jun 05 '14 at 10:35
I used this method to do the same thing that asked in the question. What I was found is there are additional space is present after using the method. I used trim(), but it makes the value is meaningless. Do you have any idea to avoid those spaces. before - ER Throttle Position ER Throttle Position ER Throt after - ER Throttle Pos ition ER Thrott le Position ER Throt – Linidu Praneeth Gunathilaka Nov 05 '21 at 10:06
var columnValue = 'ER Throttle Position ER Throttle Position ER Throt'; var result = ''; while (columnValue.length > 0) { var sub = columnValue.substring(0, 15) + '\n'; result += sub; columnValue = columnValue.substring(15); } columnValue = result; return columnValue; – Linidu Praneeth Gunathilaka Nov 05 '21 at 10:09

Martin K · Answer 2 · 2018-08-13T07:51:01.627

24

You can do this is just one line of code.

var newStr = str.replace(/.{200}/g, "$0\n")

Works well if you want prefixes or postfixes on every line as well

var newStr = str.replace(/.{200}/g, "prefix- $0 -postfix\n")

edited Aug 13 '18 at 07:51

answered Nov 19 '14 at 08:20

Martin K

742
6
13

5

Very nice one-liner. Good job. – Bob Enohp Nov 30 '14 at 03:17
2

`str.replace(/.{200}/g, "$0\n")` does the same. – Titus Sep 21 '16 at 09:59
Nice! What if you want to avoid putting `\n` at the last one. Say it is 800 letters and you don't want a new line at the 800? - I found lodash `trim` to handle it.. – Norfeldt Aug 05 '18 at 11:26
8

This didn't work for me with $0. This did though . `str.replace(/(.{200})/g, "$1\n")` – eythort Mar 14 '19 at 23:28

score 3 · Answer 3 · answered Dec 01 '10 at 05:41

Try this function it is just plain javascript. It takes the string and the number of characters to break after.

function addBreaks(s,c) {
    var l = s.length;
    var i = 0;
    while (l > c) {
        l = l-c;
        i=i+c;
        s = s.substring(0,c)+"\n"+s.substring(c);
    }
    return s;
}
var a=' aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';

addBreaks(a,200);

score 1 · Answer 4 · answered Dec 01 '10 at 05:35

1

http://javascript.about.com/library/blchunk.htm

answered Dec 01 '10 at 05:35

alxndr

3,571
3
35
32

score 1 · Answer 5 · edited Oct 01 '17 at 00:05

1

If user is entering that text you can do the following:

Implement keydown event and whenever you reach the 200 count... insert a new line character and append it again.
If you are getting it from database, just before setting the value read that string and insert a new line character manually.

edited Oct 01 '17 at 00:05

Jefferson

784
9
24

answered Dec 01 '10 at 05:39

kobe

15,239
15
61
87

score 1 · Answer 6 · answered Dec 01 '10 at 05:46

 $("#text").keyup(function()//Detect keypress in the textarea
    {
        var text_area_box =$(this).val();//Get the values in the textarea
        var max_numb_of_words = 200;//Set the Maximum Number of chars
        var main = text_area_box.length*100;//Multiply the lenght on words x 100

        var value= (main / max_numb_of_words);//Divide it by the Max numb of words previously declared

        if(text_area_box.length >= max_numb_of_words) {
            //add break
        }
        return false;
        });

sumedha munjewar · Answer 7 · 2022-06-01T19:25:07.637

<!DOCTYPE html>
<html>
<head>
<title>HTML textarea Tag</title>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

        <textarea data-row-maxlength="200" data-limit-row-len="true"></textarea>

</body>
</html>

<script>
    $("textarea[data-limit-row-len=true]").on("input focus keydown keyup",
            function(event) {
                var maxlength = $(this).data("row-maxlength");

                var text = $(this).val();
                var lines = text.split(/(\r\n|\n|\r)/gm);
                for (var i = 0; i < lines.length; i++) {
                    if (lines[i].length > maxlength) {
                        lines[i] = lines[i].substring(0, maxlength) + "\n";
                    }
                }
                $(this).val(lines.join(''));
            });
</script>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jun 02 '22 at 03:57

How to insert a newline character after every 200 characters with jQuery

7 Answers7

Linked