logo标签列表

如何使用jQuery在每200个字符后插入换行符

javascriptjquery
17

我有一个文本框，用于插入一些信息。我想使用jQuery或JavaScript在每200个字符后插入一个换行符。

例如：

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
在这个例子中，我想在每200个字符后插入一个换行符。我该如何实现？
2
你为什么要这样做？ - Derek Adair
8个回答
26

将字符串每200个字符分隔一次，并在分隔后加上换行符，然后对剩余的字符串重复此过程：

function addNewlines(str) {
  var result = '';
  while (str.length > 0) {
    result += str.substring(0, 200) + '\n';
    str = str.substring(200);
  }
  return result;
}
1
可以通过提供更多选项并在换行时使用连字符来改进。请参见我的比较中的改进。 - James Cameron
我使用了这种方法来做与问题中所要求的相同的事情。我发现在使用该方法后还有额外的空格存在。我尝试了trim()，但它会使值变得毫无意义。你有什么办法可以避免这些空格呢？ 之前 - ER油门位置ER油门位置ER Throt 之后 - ER油门位 置ER油门位置ER Throt - Linidu Praneeth Gunathilaka
var columnValue = 'ER 油门位置 ER 油门位置 ER 油门'; 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
26
你只需要一行代码就可以实现这个。
var newStr = str.replace(/(.{200})/g, "$1\n")

如果您希望每行都有前缀或后缀，那么它的效果很好

var newStr = str.replace(/(.{200})/g, "prefix- $1 -postfix\n")
6
非常好的一句话。干得好。 - Bob Enohp
2
str.replace(/.{200}/g, "$0\n") 做的是相同的事情。 - Titus
不错！如果您想避免在最后一个字符处添加\n，怎么办？假设它是800个字母，您不想在第800个字符处换行呢？- 我发现lodash的trim可以解决这个问题。 - Norfeldt
8
这对我在$0上没起作用，但这个可以。 str.replace(/(.{200})/g, "$1\n") - eythort
3
尝试使用这个函数，它只是普通的 JavaScript。它需要一个字符串和要断开的字符数。
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);
1
如果用户正在输入该文本，您可以执行以下操作：

  1. 实现 keydown 事件，每达到200个字符时... 插入一个新行符并再次追加。

  2. 如果从数据库中获取该文本，请在设置该值之前手动读取该字符串并插入一个新行符。

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

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

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community
0
对于那些想要在每个单词之后添加新行而不是在字符处突然断开的人：
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
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接