Replace @word in text input

[Andy2024]

I have a timeline element on a page which users can post comments on and tag other user.

The issue i am having is when users are tagged by @name a select list pops up and you can select the user you want to tag, i wanted it similar to whatsapp but its all gone wrong. If i start typing then tag someone it returns @namenamename the more i type the longer the tag @namenamenamenamenamenamenamenamenamename and so on. Ideally when the user is selected i would like the word starting with the @character replacing

I've tried searching for a solution but cant find anything

Here is the script i have

 

$(window).on('load',function(){
	$('#notesbody').scrollTop($('#notesbody')[0].scrollHeight);
});
$(document).on('keypress','#notes-input',function(e){
    if(e.which==64){
				$('#userlist').removeClass('d-none');
    }
});
$(document).on('click','#userlist', function(e){															 
	const username = $(this).find('option:selected').val();
	//username = $(this).val();
	//$('#notes-input').val($('#notes-input').val() + username);
	$('#notes-input').val() = $('#notes-input').replaceWith('/@([a-z0-9_]+)/i', username);
	$('#userlist').addClass('d-none');
	$('#notes-input').focus();
});	

 

[gizmola]

You did not provide the code that moves the input into the list.  It's also not clear whether or not the text should retain the @. 

The first issue is this line:  $('#notes-input').val() = $('#notes-input').replaceWith('/@([a-z0-9_]+)/i', username);

Using jquery selector.val() gets the value.  So you can't assign something to that.

You also have an issue using replaceWith, which replaces an entire element rather than just the value.

Another change I've added triggers the substitution on the select list  'change' event rather than the click event.

I put in some debug statements so that you can better see what is happening.  

 

$(document).on('change','#userlist', function(e){															 
    const username = $(this).find('option:selected').val();
    console.log(username);
    let notesInput = $('#notes-input').val();
    console.log(notesInput);
    notesInput = notesInput.replace(/@([a-z0-9_]+)/i, '@'+username);
    console.log(notesInput);
    $('#notes-input').val(notesInput);
    $('#userlist').addClass('d-none');
    $('#notes-input').focus();
});

[Andy2024]

That worked to a certain extend but if you want to write

Quote

@user1 can you make @user3 a coffee please

it is changing all occurrences of @name to the same value

[gizmola]

I suppose you could do lookaheads to make sure that the @ is the last character or followed by whitespace.  This would leave pre-existing replacements alone.

$(document).on('change','#userlist', function(e){															 
    const username = $(this).find('option:selected').val();
    let notesInput = $('#notes-input').val();
    notesInput = notesInput.replace(/(@((?=$)|(?=\s)))/i, '@'+username);
    $('#notes-input').val(notesInput);
    $('#userlist').addClass('d-none');
    $('#notes-input').focus();
});