每 x 个字符添加换行符（使用 jquery / angular）

Question

我想使用此代码每 10 个字符自动添加一个换行符：

HTML :

<div ng-app="">
  <textarea id="chat" ng-model="msg"></textarea>
  <span class="msg" ng-bind="msg"></span>
</div>

自然地，当我在文本区域中键入内容时，它会出现在跨度下方。但我希望它像每 10 个字符有一个换行符一样工作。

我试过了：

JQuery :

var n = $('#chat').val().length;
if (n%10 == 0 && n > 0) {
  $('.msg').append('<br>');
}

以及许多其他事情，例如将 < br > 替换为 '\n'，将 .append 替换为 .appendTo，但无论我尝试什么，出现在跨度中的文本都只是一行。我还尝试了我在这个网站上找到的解决方案，比如使用 "white-space:pre;" 或使用

...

来设计跨度。我想提一下，我是 AngularJS.

的新手

Answer 1

If 行不通，你必须像这样循环遍历文本

   $("#chat").keyup(function(){
     var msg = $(this).val();
     var span_msg='';
     for(var i=0; i<msg.length; i++)
      span_msg+=msg[i]+(i==10?"<br>":"");
     $('.msg').html(span_msg);
    });

Answer 2

Angular方式：

过滤器：

app.filter('addBr', function($sce){

    return function(input, length) {

        return $sce.trustAsHtml(input.match(new RegExp(".{1," + length + "}", 'g')).join("<br/>"));

    };
});

控制器：

$scope.test = "Professional lorem ipsum generator for typographers";

查看：

<div ng-bind-html="test | addBr: 20"> </div>

我希望这会奏效，对我来说确实如此。

每 x 个字符添加换行符（使用 jquery / angular）

Adding line breaks every x characters (using jquery / angular)

jquery

angularjs

line

break