How to strip all non alphanumeric characters from a textarea and return a string of words separated by single spaces

Question

I'm trying to take text that users input into a textarea and check it against a custom dictionary file. As a first step, I'd like to parse the input and strip out non-alphanumeric characters (which would likely contain punctuation) and extra spaces / newline characters and end up with a string of words separated by single spaces.

For example, start with

The child said, 
"Bye"!

and end up with

The child said Bye

I tried the following, but whenever there is a new line, it is replacing the newline character with a literal "n" in the comment_stripped variable. How can I get it to return comment_stripped as words separated by spaces without adding "n" characters?

jQuery(document).ready(function($){
  var comment_raw = '';
  var comment_stripped = '';
  $("#comment").on("input", function(){
        comment_raw = ($(this).val());
        comment_stripped = JSON.stringify(comment_raw).replace(/[^\w\s]|_/g, "").replace(/\n/g, " ").replace(/\s+/g, " ");
        console.log('comment raw = '+comment_raw);
        console.log('comment stripped = '+comment_stripped);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false"></textarea>

Answer 1

JSON.stringify is not required. Try this

jQuery(document).ready(function($) {
  var comment_raw = '';
  var comment_stripped = '';
  $("#comment").on("input", function() {
    comment_raw = ($(this).val());
    comment_stripped = comment_raw.replace(/[^\w\s]|_/g, "").replace(/\n/g, " ").replace(/\s+/g, " ");
    console.log('comment raw = ' + comment_raw);
    console.log('comment stripped = ' + comment_stripped);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false"></textarea>

Answer 2

The "n" you get is the consequence of using JSON.stringify. You shouldn't call that.

Also:

• You don't need a separate replace for "\n"
• You should deal with the case where there is no space between words, but only other non-alphanumericals. Your code will glue those words together. So replace a sequence of non-alphanumericals by a space.
• Trim the result, so you get rid of a potential space at the start or end.
• It is advised to use the jQuery function callback argument, instead of ready.
• You can define your variables in the inner scope. They have no use outside of it.

jQuery(function($) {
  $("button").on("click", function() {
    var comment_raw = $("#comment").val();
    $("#comment").val(
      comment_raw.replace(/([^\w\s]|_)+/g, " ")
                 .replace(/\s+/g, " ")
                 .trim()
    );
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false"></textarea>
<button>clean</button>

And it looks a bit more straightforward, if you use match instead of replace:

jQuery(function($) {
  $("button").on("click", function() {
    var comment_raw = $("#comment").val();
    $("#comment").val(
      (comment_raw.match(/[a-z0-9]+/gi) || []).join(" ")
    );
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false"></textarea>
<button>clean</button>