angular- How to get the deleted text from textarea

In Angular, there are several ways a user can delete a character or word from an input or textarea field:

1. Pressing the Backspace key: When the user presses the Backspace key, it deletes the character preceding the cursor.

2. Pressing the Delete key: When the user presses the Delete key, it deletes the character following the cursor.

3. Selecting and replacing text: The user can select a portion of the text in the input or textarea field and replace it by typing new characters. This effectively deletes the selected text.

4. Cutting text: The user can cut a portion of the text by using the Cut command (Ctrl+X or Command+X). This removes the selected text and copies it to the clipboard.

5. Clearing the entire field: The user can clear the entire input or textarea field by pressing Ctrl+A (or Command+A) to select all the text and then pressing the Delete key or Backspace key.

These are some of the common ways a user can delete characters or words from an input or textarea field in Angular. The exact behavior may vary depending on the specific implementation and the platform/browser being used.

I need a function to performs all these functions to get the deleted text from textarea.
The funciont(s) must give the character deleted and the word from which the character is deleted or even if the entire word is deleted.

I am stucked how to get the character deleted from textarea. I am allowing users to mention users using @ key.
If user deleted any character from the mentioned word then it must delete the entire word.

Even if I do asked for a specific case in that previous comment (about pasted content), here's what you can certainly do:

1. Bind textarea value to a model and listen for changes of the content of textarea, but adding keydown, keyup and paste to the element:

   <textarea
     [(ngModel)]="textAreaContent"
     (keydown)="captureBeforeChange($event)"
     (keyup)="captureAfterChange($event)"
     (paste)="handlePaste($event)"
     rows="4"
     cols="50"
   ></textarea>
   

This way you will make it easy to always access the previous value of the textarea and the current (new) value. Method bound to paste will only change the value of a var that's used in other methods, though, so you can easily change it to (paste)="pasteUsed=true", although I prefer removing all logic and calculations from template into ts file.

1. captureBeforeChange method will just make sure you have your previous text value updated before any change, so it'll only have this.previousContent = this.textAreaContent;.

2. Other than that, all logic is organized in this way:

3. discern changes made by pasting new content from changes that are caused by hitting delete or backspace; this is done by setting th handlePaste to true when it's used and setting it to false when the action on input field is not using paste,

4. when content is changed, discern when the change is caused by just one character (hitting delete or backspace) or if it's from selecting several (more than 1) characters and typing over them,

5. whatever the length of the deleted/replaced characters is, always check if it's actually changing the word starting with @ (a mention) and remove the whole word if it is,

6. if the content was changed by pasting new content (in any situation when previous content is not equal to the new one created after pasting) get the replaced content and also make a collection (an array) of mentions (@ words) that were replaced by the paste.

If you need detailed explanation of the code, don't hesitate to ask and I will edit this answer to include it.

Stackblitz example.

Whole ts code:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  textAreaContent: string = '';
  previousContent: string = '';
  pasteUsed: boolean = false;
  mentionDeleted: boolean = false;

  constructor() {}

  ngOnInit(): void {}

  captureBeforeChange(event) {
    this.pasteUsed = false;
    // Capture the textarea content before the keypress
    this.previousContent = this.textAreaContent;
  }

  handlePaste(event: ClipboardEvent) {
    this.pasteUsed = true;
  }

  captureAfterChange(event) {
    // if content was changed with pressing backspace or delete keys, or if selection is made and typed over
    if (!this.pasteUsed) {
      // Compare the previous content with the current content to find the deletion
      let previousLength = this.previousContent.length;
      let newLength = this.textAreaContent.length;

      // triggered only if at least one character was removed
      if (this.previousContent.length > this.textAreaContent.length) {
        // get starting index of a difference between previous and current content
        let diffIndex = this.findDifferenceIndex(
          this.previousContent,
          this.textAreaContent
        );
        // first scenario: only a single character deleted:
        if (previousLength == newLength + 1) {
          // check if mention (@) word should be deleted
          this.checkForMention(diffIndex);
          // check if the content to delete is not a mention
          if (!this.mentionDeleted) {
            let deletedChar = this.previousContent[diffIndex];
            console.log('Deleted character: ', deletedChar);
          }
        }
        // second scenario: only a single character deleted:
        if (previousLength > newLength + 1) {
          // check if mention (@) word should be deleted
          this.checkForMention(diffIndex);
          // check if the content to delete is not a mention
          if (!this.mentionDeleted) {
            let deletedContent = this.getDeletedSubstring();
            console.log('Deleted substring: ', deletedContent);
          }
        }
      }
    }
    // if content was changed with paste, over whole content or over a selection
    else {
      // if content was actually changed
      if (this.previousContent != this.textAreaContent) {
        let deletedContent = this.getDeletedSubstring();
        console.log('Deleted substring by paste: ', deletedContent);
        // if the paste deleted some mentions, get them all into an array of mentions
        if (deletedContent.includes('@')) {
          let deletedMentions = deletedContent.match(/@\w+/g);
          console.log('Deleted mentions by pate: ', deletedMentions);
        } else {
        }
      }
    }
  }

  getDeletedSubstring() {
    return this.findDeletedSubstring(
      this.previousContent,
      this.textAreaContent
    );
  }

  checkForMention(diffIndex) {
    this.mentionDeleted = false;
    // get the whole word from which a character has been deleted
    let deletedWord = this.getDeletedWord(this.previousContent, diffIndex);
    // Check if the deleted character was part of a mention, if so, delete the whole word that includes the mention
    if (deletedWord.includes('@')) {
      this.textAreaContent = this.previousContent.replace(
        deletedWord + ' ',
        ''
      );
      this.mentionDeleted = true;
      console.log('Deleted @ word: ', deletedWord);
    }
  }

  findDeletedSubstring(previous, current) {
    var start = 0;
    var end = 0;

    // Find the start of the difference
    while (previous[start] === current[start]) {
      start++;
    }

    // Find the end of the difference
    while (
      previous[previous.length - 1 - end] === current[current.length - 1 - end]
    ) {
      end++;
    }

    // Return the deleted substring
    return previous.slice(start, previous.length - end);
  }

  findDifferenceIndex(previousContent, currentContent) {
    // Find the first index where the two strings differ
    let i = 0;
    while (previousContent[i] === currentContent[i]) {
      i++;
    }
    return i;
  }

  getDeletedWord(previousContent, diffIndex) {
    // Get the word that includes the character at the difference index
    let words = previousContent.split(' ');
    for (let word of words) {
      if (
        previousContent.indexOf(word) <= diffIndex &&
        diffIndex <= previousContent.indexOf(word) + word.length
      ) {
        return word;
      }
    }
  }
}