I am developing a small project.

The goal of this project is to strip the formatting (double spaces, numbers, and newlines) and then output the value with a line break every "x" characters, but make sure it ends with a comma or period.

For example...if I set the character limit to 50 (after the "l" in "until"), I want it to look like this. Note that the example favors punctuation over character limits, but it does not add newlines unless you are at least close to the character limit (I added the extra commas to explain further):

"The quick brown fox jumped over the lazy dog,

Until the dog falls asleep. ”

instead of (character limit):

"The agile brown fox jumped over the lazy dog ​​until

The dog fell asleep. ”

or (punctuation mark):

"quick,

The brown fox jumps over the lazy dog,

Until that dog,

Fell asleep. ”

If you want my current code (removing double spaces, numbers and newlines) to work...

<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>

Again, this is a personal project, so don't rush into a solution/if it's not possible, no problem.

I tried executing basic if/else statements via Javascript without success. I have a basic understanding of jQuery and Javascript, so I may be limited by my lack of knowledge.

While looking for a solution, I figured out how to create a newline at the character limit and a newline at the punctuation mark, but for some reason I couldn't figure out how to create a newline at the punctuation mark like the most function.