DEV Community

Vishesh
Vishesh

Posted on

1 4

Remove new lines while copy paste in JS/Angular

Removing the new line spaces is essential because. It is very difficult to identify the issue. Also. Very difficult for user to identify whats wrong. This happens mostly when a user copies a string with new line and paste it in an input box. In case you have any regex to verify, it will throw validation error. But if you see the extra new space will not be visible. Thus you must remove it during copy paste itself to avoid handling issues later.

Simple intro

I always create a reusable input component in angular and use this instead of direct HTML input tags. This way i can keep all the validations at one place. When ever i want i can enable or disable the validations where ever i use it. This is simple.
Speaking of validations i always use form controls. If you are interested on this structure. Check this article https://dev.to/vishesh/custom-error-handling-in-angular-reactive-forms-5f05

Validation

Below is the validation i used for my name input box.

/^[a-zA-Z_\s]*$/

As you can see i only allow uppercase or lowercase alphabets, underscores and spaces.

Problem

The user copy pasted a string "Vishesh" from a website. Still the validation error showed.

Alt Text

I was wondering what happened? Because as u can see in above image the pasted text was perfect. I tried and paste several strings. But only after seeing from user how they copy pasted i understood what's wrong. Because some users unable to understand it. See how they copied below.

Alt Text

Thus here i could do 4 things,

  1. Educate the user to copy paste only the text. There are billion's people and millions might use your site. So you can see that educating is not a proper solution.
  2. Not allow paste action. Nope, this is nonsence. We cant do this.
  3. Ofcourse string trimming is not a solution as it will only remove starting and ending spaces.
  4. Handle in code by removing such new lines while pasting. This is simpler and since we are changing at origin itself we need not avoid doing string operations down the line.

Thus i created below utility function,
Its a common function that can get the string value and form control to replace the string value and event to stop the paste action process abruptly because we took care of value update.

// Remove line breaks from string
  removeNewlines(event, control: FormControl, str: string = null) {
    if (!str) { str = event.clipboardData.getData('text/plain'); }
    str = str.replace(/\s{2,}/g, ' ');
    str = str.replace(/\t/g, ' ');
    str = str.toString().trim().replace(/(\r\n|\n|\r)/g, '');
    control.setValue(str);
    event.preventDefault();
  }
Enter fullscreen mode Exit fullscreen mode

Finally in the common input component on paste event we can call this utility function.

<input (paste)="util.removeNewlines($event, control)">
Enter fullscreen mode Exit fullscreen mode

Conclusion

This is not much but in the user perspective this is big as they cannot submit forms. Thus this solution is a clean way to fix these issues. Hope it helps !!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (1)

Collapse
 
sonugpc profile image
Sonu Gupta •

You forgot to handle the case when copy paste is happening between text or in the start and user want to remove new lines from pasted content only

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more