如何将textarea中的粘贴文本分成<p>个由相同字符数组成的段落？

Question

我正在使用的 JSFiddle 似乎正是我的项目所需要的。但是，我将如何更改此当前代码以确保每个分段的段落包含相同数量的字符并且所有段落的宽度相同？

任何帮助将不胜感激，尤其是更新的 JSFiddle 将非常有帮助。

    $(function() {
      $('button').on('click', function() {
        var theText = $('textarea').val();
        var i = 200;
        while (theText.length > 200) {
          console.log('looping');
          while (theText.charAt(i) !== '.') {
            i++;
          }

          console.log(i);
          $("#text_land").append("<p>" + theText.substring(0, i + 1) + "</p>");
          theText = theText.substring(i + 1);
          i = 200;
        }

        $('#text_land').append("<p>" + theText + "</p>");
      })

    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <div id="text_land" style="border:1px solid #ccc; padding:25px; margin-bottom:30px;">xzxz</div>
  <textarea style="widht:95%;"></textarea>
  <button>Go</button>
</div>

Answer 1

如果所有段落的字符数和宽度都必须相同，那么每个字符的宽度也必须相同，并且您必须使用单spaced 字体。

使用此代码，您可以将输入文本分成相等的块，它们以相等的宽度显示在段落中。

$(function () {
    $('button').on('click', function () {
        var theText = $('textarea').val();
        var numberOfCharacters = 50;

        while (theText.length) {
            $("#text_land").append("<p>" + theText.substring(0, numberOfCharacters - 1) + "</p>");
            theText = theText.substring(numberOfCharacters);
        }

    })

})

当然，这不会像您的fiddle那样在句点字符上剪切文本，它可能会在单词中间剪切，但是您不能把饼干也吃掉。

如果你想确保至少单词不会在中间被截断，你可以放松你的每行字符数限制，直到你找到这样的 space..

$(function () {
    $('button').on('click', function () {
        var theText = $('textarea').val();
        var numberOfCharacters = 20;

        while (theText.length) {
            while (theText.length > numberOfCharacters && theText.charAt(numberOfCharacters) !== ' ') {
                numberOfCharacters++;   
            }
            $("#text_land").append("<p>" + theText.substring(0, numberOfCharacters) + "</p>");
            theText = theText.substring(numberOfCharacters);
        }

    })

})

如何将textarea中的粘贴文本分成<p>个由相同字符数组成的段落？

How to divide pasted text from textarea into <p> paragraphs that consist of the same number of characters?

html

javascript

css

jquery

paragraph