Add line breaks after two conditions are met: no more than "x" characters and ending with a comma or period

Question

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.

Answer 1

Before writing the next section of code, make sure your requirements are clear

Currently, this is internally contradictory.

There are several problems with your demand description:

1. I think you want the newline to express a word, don't you? But you haven't mentioned this yet.

2. What happens if the word is longer than 50 characters?

3. The "ensure" statement conflicts with the possibility that there may be 50 characters without a comma or period.

Do you mean each line must be no longer than 50 characters? If a word is longer than 50 characters, it must be split. [Think about what you want to happen if a 50-character word comes just before a comma: do you want the comma to wrap or word split, or to extend the line to 51 characters. If you want the last one, you'll have to reword this rule. ]

I recommend listing the requirements like this:

1. Start with all text in the input and an empty string as output.
2. Build a line as follows: Find the last space within the first 50 characters of the input
3. If there are spaces like this: Is there a comma or period in the first text?
   • If so, find the last comma or period and truncate the text there.
   • Otherwise, cut off the last space.
4. If there are no spaces like this: you have a word, or word punctuation, it's too long. (Specify what you want to do here: e.g. truncate words, allow lines to extend, etc.)
5. After steps 2,3 and 4, you will form a line of text. Add it to the output and remove it from the input.
6. Repeat steps 2-5 until all are completed.

If the above is what you want to accomplish, then it's a good basis for writing code

The key is to know what you want. If you can explicitly express this, you can usually code it easily. The problem is that in the non-programming world, most people's descriptions are vague and we don't realize it until we start writing code.