Integrate SanitizeFunction with React textArea onPaste

Question

Use Case:

I have a use case where the User can paste ONE of the following string(s) in textArea and it must be formatted to new Line:

Comma-space (E.g: 12, 2, 3)

Comma-newline (E.g: 12,\n2,\n3,\n)

Newline (E.g: 12\n2\n3\n)

I'm trying to use onPaste functionality but not sure how to Integrate this use case with React textarea onPaste

I have this sanitzation util that takes paste input (string) and returns an array

function sanatizeToArray(str){
    str=str || "";
    str = str.replaceAll(" ",""); // get rid of spaces!
    str = str.replaceAll("\n",","); // change new lines into commas
    str = str.replaceAll(",,",","); // get rid of duplicates
    return str.split(","); // break it down!
}

sanatizeToArray("12, 2, 3"); // Prints ["12", "2", "3"]
sanatizeToArray("12,\n2,\n3,\n"); // Prints ["12", "2", "3", ""]
sanatizeToArray("12\n2\n3\n"); // Prints ["12", "2", "3", ""]

I would really appreciate if someone can help integrate this sanitizeArray function with onPaste.

What code do you have so far for working this in to your textarea? Also why not just use onChange? — Joel Rummel
– Joel Rummel, Commented Jul 23, 2021 at 16:18
@JoelRummel This is the code I have so far. I need to use onPaste cuz the user is expected to copy paste one of these three formats: codesandbox.io/s/money-input-example-forked-vsom5?file=/src/… First one works, however second and third doesn't .. But the util seems to be working fine if i run in console individually :( — TechnoCorner
– TechnoCorner, Commented Jul 23, 2021 at 16:20
That code is working fine for me for all use cases. What exactly is your issue? — Joel Rummel
– Joel Rummel, Commented Jul 23, 2021 at 16:24
If you go to codesandbox, copy paste the second and third use case, it doesn't print correct value in a new line. (I call this sanitize function, take the results and print in new line). Thanks for all the help @JoelRummel will upvote your answer. — TechnoCorner
– TechnoCorner, Commented Jul 23, 2021 at 16:33
You could also see that there is \n when you copy paste the second use case in text area (which isn't expected :( don't know whats going on. — TechnoCorner
– TechnoCorner, Commented Jul 23, 2021 at 16:33

Joel Rummel · Accepted Answer · 2021-07-23 16:51:43Z

1

From the code sample you provided in the comments, your onPaste integration is working fine. Your sanitize function is also working fine, depending on what exactly it is you're trying to do.

Literally typing \n into your textarea isn't the same as typing an actual linebreak, since \n automatically gets escaped to \\n when entered in a textarea. This means that a string like Hello\nWorld\n! will get processed as Hello\\nWorld\\n!, and your replaceAll call will fail to find any linebreak characters.

If you want to test pasting actual linebreaks into your input (which is the vastly more likely input), then copy-paste this block and you will notice that your code works just fine:

12
2
3

If you want to replace escaped linebreak characters as well, then you just need to add an additional replaceAll call:

str = str.replaceAll("\\n", ",");

although I doubt that this is necessary.

answered Jul 23, 2021 at 16:51

Joel Rummel

8505 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TechnoCorner Over a year ago

You're awesome Joel!

Collectives™ on Stack Overflow

Integrate SanitizeFunction with React textArea onPaste

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related