css 满足两个条件后添加换行符:在“x”个字符以下,以逗号或句点结尾

jgwigjjp  于 2023-01-10  发布在  其他
关注(0)|答案(1)|浏览(180)

我在做一个小项目。
该项目的目标是去除格式(双空格、数字和换行符),然后输出每隔“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有基本的了解,所以我可能只是受到知识缺乏的限制。
在查找解决方案时,我想出了如何在字符限制处创建换行符和在标点处创建换行符,但由于某种原因,我不能想出如何同时使用标点处的换行符作为首选函数。

nr9pn0ug

nr9pn0ug1#

在编写下一部分代码之前,请确保您的需求是明确的

目前,这是一种内部矛盾。
每隔“x”个字符换行,但要确保以逗号或句号结尾。
您的需求的这种描述存在几个问题:
1.我想你想让换行符试着表达一个词,是吗?但你没有提到这一点。
1.如果单词长度超过50个字符,会发生什么情况?
1.语句“确保”与可能存在一段50个字符且没有逗号或句点的情况相冲突。
你的意思是每一行都不能超过50个字符吗?如果有一个单词超过50个字符,它必须被拆分吗?[想想如果这个50个字符的单词正好在逗号前面,你会发生什么:是否希望逗号在新行上,或单词拆分,或该行加长为51个字符。如果希望最后一个字符,则必须改写此规则。]

我建议将需求安排如下:

1.从输入中的所有文本和输出中的空字符串开始。
1.按如下方式建立一条线:查找输入的前50个字符中的最后一个空格

  • 如果有这样的空间:第一段文字中有逗号或句号吗?
  • 如果是这样,找到最后一个逗号或句号,并在那里砍下文本。
  • 否则就砍最后一个空格。
  • 如果没有这样的空间:您有一个太长的单词或单词+标点符号。(请在此处指定要执行的操作:例如,截断字、允许行延伸等)
  • 作为步骤2、3和4的结果,你将形成一行文本。将它添加到输出中,并从输入中删除它。
  • 重复步骤2-5,直至完成所有操作。

如果以上是您 * 想要 * 完成的,那么它就是编写代码的良好基础

关键是要清楚你想要什么。如果你能“毫不含糊”地表达出来,你通常可以很容易地编写代码。问题是,在非编程世界里,大多数人在描述时含糊其辞,而我们直到开始编写代码时才意识到这一点。

相关问题