Question

我希望使用以下代码每10个字符自动添加一个换行符：

HTML：

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

当我在textarea中输入内容时，它会显示在跨度的下方。但我希望它能像每10个字符一行换行一样工作。

我试过了：

JQuery：

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

和许多其他事情，如替换＆lt; br＆gt;与＆＃39; \ n＆＃39;，。append与.appendTo，但无论我尝试什么，跨度中出现的文本只是一行。我也尝试过在这个网站上找到的解决方案，比如使用＆＃34; white-space：pre;＆＃34;或使用＆lt; pre＆gt; ...＆lt; / pre＆gt;。我想提一下，我是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）

2 个答案: