如何从输入中获取@name的数组索引？

Question

I have a textarea and a dropdown set. I have it set so if a user does @name (or anything) it will display a dropdown list of users with specified input. I don't know how to do the regex for searching an array for an @name within it.

Example: User types "Hi @bob" , then array is ["Hi","@bob"] ;

How do I find where @bob is and if a user hit spaces afterwords, the regex detects if a space is placed right after it.

example code I have tried

$(document).keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);

 if(keycode == 64) { //Enter keycode
 $('.postingArea').on("keyup", function(){

    var inputVal = $(this).val();
    var res = inputVal.split(" ");
    console.log(jQuery.inArray( "@/w/", res ));

var myString = inputVal.match(/@([^ ]*)/)[1]; 
 var resultDropdown = $(this).siblings(".result2");


if (jQuery.inArray( "@", res ) < 1) {
        resultDropdown.empty();
    }else {

        $.get("../Admin/Users/SearchUser.php", {userAtd: myString}).done(function(data){
            // Display the returned data in browser
            resultDropdown.html(data);

        });
    } 
 })
}  

This sort of works, but jQuery.inArray doesn't accept regex, so it only works when @ is clicked, but not for the rest of the letters following. And then it should detect when there is a space after the word so then it knows that the @ is done.

When doing console.log(res); The output in log is ["this", "is", "a", "test", "@user"] What I need is for it to detect when @ is clicked and then when that part of the array is finished such as hitting space since hitting space makes the array res now ["this", "is", "a", "test", "@user",""]

Answer 1

You could use the following regex to extract every words that start by "@" and that have space after it in a string.

/@[az\\d]+/ig

See examples : https://regex101.com/r/WDZNyl/1

Once you get the list, it will be easier for you to find the desired values in database.

Answer 2

I figured out the answer, @Flo's response helped a bit coming up with this. I had to detect two different array lengths and compare the two and find where the @ started between both arrays and then set a variable x to the length of the original input and then do a .test as my if statement. Code down below

// @'d feature
$(document).keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);

 if(keycode == 64) { //Enter keycode
 $('.postingArea').on("keyup", function(){

    var inputVal = $('.postingArea').val();
    var res = inputVal.split(" ");

 var res2 = inputVal.match(/@[a-z\d]+/ig);

 var resultDropdown = $(this).siblings(".result2");
var x=0;
if(x <= res2.length){
   x = res.length-1;
}

if(/@[a-z\d]+/ig.test(res[x])) {
  var myString = res[x]; 

        $.get("../Admin/Users/SearchUser.php", {userAtd: myString}).done(function(data){
            // Display the returned data in browser
            resultDropdown.html(data);

        });


    }else {



          resultDropdown.empty();

    } 
  })
  }
})