在满足两个条件后添加换行：字符数不超过"x"个且以逗号或句号结尾

Question

我正在开发一个小型项目。

该项目的目标是去除格式（双空格、数字和换行符），然后输出该值，并每隔“x”个字符换行一次，但确保它以逗号或句点结尾。

例如...如果我将字符限制设置为 50（在“until”中的“l”之后），我希望它如下所示。请注意，该示例倾向于使用标点符号而不是字符限制，但它不会添加换行符，除非您至少接近字符限制（我添加了额外的逗号以进一步解释）：

“敏捷的棕色狐狸跳过了懒狗，

直到那只狗睡着了。”

而不是（字符限制）：

“敏捷的棕色狐狸跳过了懒狗，直到

那只狗睡着了。”

或（标点符号）：

“快，

棕色狐狸跳过懒狗，

直到那只狗，

睡着了。”

如果您希望我当前的代码（删除双空格、数字和换行符）能够正常工作...

<script>
function printText() {
    var inputValue = document.getElementById("paste-text").value;

    function editText() {
        inputValue = inputValue.replace(/(\r\n|\n|\r)/g, ' ');
        inputValue = inputValue.replace(/[0-9]/gm, ' ');
        inputValue = inputValue.replace(/(\s\s\s\s)/gm, ' ');
        inputValue = inputValue.replace(/(\s\s)/gm, ' ');
        inputValue = inputValue.trim();
        return inputValue;
    }

    if (inputValue.length > 0) {
        document.getElementById("text-output").innerText = editText();
        document.getElementById("edit-text-output").classList.add("showEdited");
    } 
}
</script>

<section>
    <div class="edit-text-container">
        <div class="edit-text-input">
            <div class="edit-text-paste">
                <h3>Paste Text</h3>
                <div class="edit-text-input-area">
                    <textarea name="paste-text" id="paste-text" rows="6" placeholder="Paste Text Here"></textarea>
                </div>
                <input type="submit" value="Remove Formatting" onclick="printText()">
            </div>
        </div>
        <div id="edit-text-output">
            <h3>Your <i>edited</i> Text</h3>
            <div class="edit-text-output-area">
                <textarea readonly id="text-output" rows="6"></textarea>
            </div>
        </div>
    </div>
</section>

<style>
textarea {
    margin:0;
    width:100%;
    padding:16px; }

#edit-text-output {
    height:0px;
    overflow:hidden;
    opacity:0;
    transition: all 0.5s;}

.showEdited {
    height:185px!important;
    opacity:1!important; }

.edit-text-container {
    justify-content:center;
    text-align:center; }

input[type=submit] {
    margin-top:16px; }
</style>

再说一次，这是一个个人项目，所以不要急于寻求解决方案/如果不可能，也没有问题。

我尝试通过 Javascript 执行基本的 if/else 语句，但没有成功。我对 jQuery 和 Javascript 有基本的了解，所以我可能会因为缺乏知识而受到限制。

在查找解决方案时，我弄清楚了如何在字符限制处创建换行符并在标点符号处创建换行符，但由于某种原因，我无法弄清楚如何在标点符号处创建换行符最喜欢的功能。

Answer 1

在编写下一部分代码之前，请确保您的要求明确

目前，这是内部矛盾的。

您的需求描述存在几个问题：

1. 我认为您希望换行符能够表达一个单词，不是吗？但你还没有提到这一点。

2. 如果单词长度超过 50 个字符会怎样？

3. “确保”语句与可能存在不带逗号或句点的 50 个字符的可能性相冲突。

您的意思是每行长度不得超过 50 个字符吗？如果单词长度超过 50 个字符，则必须将其拆分。 [考虑一下如果 50 个字符的单词就在逗号之前，您希望发生什么：您希望逗号换行还是单词拆分，或者将行延长到 51 个字符。如果您想要最后一个，则必须重新措辞此规则。]

我建议像这样列出要求：

1. 从输入中的所有文本开始，并以空字符串作为输出。
2. 按如下方式构建一行：查找输入的前 50 个字符内的最后一个空格
3. 如果有这样的空格：第一段文本中是否有逗号或句号？
   • 如果是这样，请找到最后一个逗号或句号并截断那里的文本。
   • 否则就砍掉最后一个空格。
4. 如果没有这样的空格：您有一个单词，或单词 标点符号，那就太长了。 （在此指定您想要执行的操作：例如截断单词、允许线条延伸等）
5. 经过步骤 2,3 和 4，您将形成一行文本。将其添加到输出中并从输入中删除它。
6. 重复步骤 2-5，直至全部完成。

如果上述内容是您想要完成的，那么它就是编写代码的良好基础

关键是要清楚自己想要什么。如果您能够明确地表达这一点，那么您通常可以轻松地对其进行编码。问题在于，在非编程世界中，大多数人的描述都含糊不清，直到我们开始编写代码时我们才意识到这一点。