簡體   English   中英

如何使用 jQuery 在每 200 個字符后插入一個換行符

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

我有一個用於插入一些信息的文本框。 我想使用 jQuery 或 JavaScript 在每 200 個字符后插入一個換行符。

例如:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

在這個例子中,我想在每 200 個字符后插入一個換行符。 我怎樣才能做到這一點?

每 200 個字符后斷開字符串,添加一個換行符,然后對剩余的字符串重復此過程:

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

你可以做到這一點只是一行代碼。

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

如果您還希望在每一行上都添加前綴或后綴,則效果很好

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

試試這個函數,它只是普通的 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. 實現 keydown 事件,每當您達到 200 個計數時...插入一個新行字符並再次附加它。

  2. 如果您從數據庫中獲取它,則在設置值之前讀取該字符串並手動插入一個換行符。

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

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

對於來到這里希望在每個單詞后添加新行而不是突然在字符處添加新行的人:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM