开发者

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

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?


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


You can do this is just one line of code.

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

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

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


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


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


 $("#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;
        });


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

  1. Implement keydown event and whenever you reach the 200 count... insert a new line character and append it again.

  2. If you are getting it from database, just before setting the value read that string and insert a new line character manually.


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


To anyone who came here looking to add the new line after each word rather than abruptly right at the character:

function addWordNewLine(str, breakpoint=80){
    var words = str.split(" ");
    var numChars = 0;
    var mult = 1;
    for(var i = 0; i < words.length; i++){
        numChars += words[i].length;

        // if( we hit a multiple of our breakpoint number )
        if(numChars > breakpoint * mult){
            words[i] += '\n';
            mult++;
        }
    }
    // As we re-arrange our text, make sure that a newline isn't followed
    // with a space so that there's no odd single-space indenting
    var p = words.join(" ").replaceAll("\n ", "\n");
    return p;
}

var str = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
var formatted = addWordNewLine(str); // default breaks after word after every 80 chars
var wideFormatted = addWordNewLine(str, 200); // breaks after word after every 200 chars
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜