滿足兩個條件后添加換行符：在“x”字符下 & 以逗號或句點結尾

Question

我正在做一個小項目。

該項目的目標是去除格式（雙空格、數字和換行符），然后 output 該值每隔“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 有基本的了解，所以我可能只是因為我缺乏知識而受到限制。

在查找解決方案后，我想出了如何在字符限制處創建換行符並在標點符號處創建換行符，但由於某種原因我無法弄清楚如何在標點符號處的換行符成為首選 function .

Answer 1

在編寫下一部分代碼之前，請確保您的要求明確

目前，它是內部矛盾的。

每一個“x”字符換行，但確保它以逗號或句點結尾。

您的需求描述存在幾個問題：

1. 我認為您希望換行符嘗試一個字，不是嗎？ 但是你沒有提到這一點。

2. 如果單詞超過 50 個字符會怎樣？

3. “確保”這一說法與可能出現一段 50 個字符且沒有逗號或句點的情況相沖突。

你真的是說每一行都不能超過 50 個字符嗎？ 如果有一個單詞超過 50 個字符，則必須將其拆分。 [想想如果 50 個字符的單詞剛好在逗號之前，您希望發生什么：您是希望逗號換行還是單詞拆分，或者該行加長到 51 個字符。 如果你想要最后一個，那么這條規則必須重新措辭。]

我建議像這樣列出要求：

1. 從輸入中的所有文本和 output 的空字符串開始。
2. 按如下方式建立一行：在輸入的前 50 個字符內找到最后一個空格
3. 如果有這樣的空格：第一段文字中是否有逗號或句號？
   • 如果是這樣，請找到最后一個逗號或句號並將文本截在那里。
   • 否則在最后一個空格處切碎。
4. 如果沒有這樣的空間：你有一個詞，或者詞+標點符號，太長了。 （在這里指定你想要做什么：例如砍掉這個詞，讓線延伸等。）
5. 作為步驟 2、3 和 4 的結果，您將形成一行文本。 將其添加到 output 並將其從輸入中刪除。
6. 重復步驟 2-5 直到全部完成。

如果以上是您想要完成的，那么它是編寫代碼的良好基礎

關鍵是要清楚你想要什么。 如果您可以明確地表達這一點，您通常可以很容易地對其進行編碼。 問題在於，在非編程世界中，大多數人在描述時都含糊其辭，直到我們開始編寫代碼時我們才意識到這一點。