replace string from a certain character javascript

Question

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!

How do you go about grabbing the @ja in the first place? You're looking at a couple issues. One, you don't remove the characters you used to grab the name before appending and two, you only append to the end of the string. What if they went back and added a mention in the middle? — Nick Abbott
– Nick Abbott, Commented Jul 18, 2018 at 1:04
@NickAbbott thats a good point, do you have a better solution?? — Smokey Dawson
– Smokey Dawson, Commented Jul 18, 2018 at 1:05
@SmokeyDawson $('#textarea').prop("selectionStart"); gives you the position of the cursor. Then all you need to do is to find the most recent @ before this position. — user3003238
– user3003238, Commented Jul 18, 2018 at 1:07
@SmokeyDawson Simply textarea.selectionStart jsfiddle.net/7n41o5kq/3 — user3003238
– user3003238, Commented Jul 18, 2018 at 1:12

Nick Abbott · Accepted Answer · 2018-07-18 01:30:23Z

1

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;
}

edited Jul 18, 2018 at 1:30

answered Jul 18, 2018 at 1:24

Nick Abbott

3741 silver badge9 bronze badges

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

Comments

user3003238 · Accepted Answer · 2018-07-18 01:41:37Z

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);

Collectives™ on Stack Overflow

replace string from a certain character javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related