CODEWITHSUNDEEP
javascripttypescript
Smokey Dawson
Smokey Dawson

Reputation: 9230

replace string from a certain character javascript

I have created a custom @mention system for my app, my only problem is ill start typing @... and then Ill select the user I want to mention and what happens is that the name of the selected user is just added onto the end of the textarea so this works If I only typed in @ but if I typed in @ja and then selected jason smith it would now say @jaJason Smith How Can I remove any text typed after the @ and then add on my string. FYI this is done in a textarea

so my current function looks like this..

addMention(user: any): void {
  const textarea = document.querySelector('textarea');
  const mentionSelect = <HTMLElement>document.querySelector('.mention-container');
  const value = textarea.value; // Store the value
  textarea.value = `${textarea.value}${user.value}`; // Current Value
  mentionSelect.style.display = 'none'; // Hide the mention list
  this.message = textarea.value; // Make sure the new textarea value is stored in message
  textarea.focus(); // refocus
  textarea.value = ''; // clear
  textarea.value = value; // add the value back in
}

so whats happening is Im just updating the value of the textarea by adding on the username

EDIT

It has been brought to my attention this is not the best way to do it since if a user moves the cursor to the middle and types @ the name will be added to the end of the string and not the @ so my question is how can I replace the string after the @ but be able to do it anywhere in the textarea??

any help would be appreciated!

Upvotes: 0

Views: 96

Answers (2)

user3003238
user3003238

Reputation: 1515

I skip the getting dom part, str refers to the value of the textarea, placeholder refers to the current intellisense, username refers to the real usernames and position is the cursor position that can be determined via document.getElementById('textarea').selectionStart

const str = 'adfsaf @ adsfsad @ja!2123afd @eeeav @asedf';
const position = 20; // just after @ja, str[20] gives the space ' ' after @ja
const placeholder = '@ja'; // you should be able to get that dynamically.
const username = 'Jason Smith';  // you should be able to get that dynamically.

const idx = str.substring(0,position).indexOf(placeholder);
const output = `${str.substring(0,position - placeholder.length)}@${username} ${str.substring(position)}`;
console.log(output);

Upvotes: 1

Nick Abbott
Nick Abbott

Reputation: 374

Here is a simplified version of a solution. I don't have your setup to test this out and there is certainly a cleaner way to do it but this should give you an idea of where to go.

addMention(user: { value: string }): void {
  const textArea = document.querySelector('textarea');
  const selection = textArea.selectionStart;
  let value = textarea.value;
  const str = value.substring(0, textArea.selectionStart);
  const index = str.lastIndexOf('@');
  const mention = str.substring(index);
  value = `${value.substring(0, index)}${user.value}${value.substring(index + mention.length)}`;
  textarea.value = value;
}

Upvotes: 1

Related Questions