Get occurence between @ and textarea current position

Question

I'd like to get the word after @ depending on the current writing position of a textarea. More precisely:

if the current cursor position is on any letter of @<user>, the answer should be <user>
if the current cursor position is on any other word, the answer should be empty ''

I'm struggling with this, but don't find any "nice" way to do it.

$('#hey').on('click', function() { alert(); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<textarea id="chat">hello @user it's me this is a long text, here is another @username cheers!</textarea>
<span id="hey">CLICK ME</span>

@mplungjan that's precisely with what i was struggling and trying to modify, isn't there a totally different way? — Basj, Oct 28 '16 at 09:40
Just test to see if the word contains @ or not. And why not tell us the code you already tried? — mplungjan, Oct 28 '16 at 09:41
It was a long piece of non-working code (see in my other questions, i usually post what i've tried, but here it's ugly and pointless). — Basj, Oct 28 '16 at 09:44
If you struggled with the answer I put as duplicate, I would have waited with marking as duplicate. What does not work for you with the code in that answer? — mplungjan, Oct 28 '16 at 09:46
The things I tried were similar to the links given by your first comment. On the other hand, the duplicate question seems to solve the problem :) Thanks for pointing me this. Only problem : see bug/comment on http://stackoverflow.com/a/15600971/1422096 Do you have any idea @mplungjan? — Basj, Oct 28 '16 at 09:48
Perhaps `var end = this.value.indexOf(' ',caret.end); if (end==-1) end = textearea.value.length-1`? — mplungjan, Oct 28 '16 at 09:54

score 5 · Accepted Answer · edited May 23 '17 at 10:27

Having updated the code from the assumed duplicate Get current word on caret position, the result is as follows

function getCaretPosition(ctrl) {
    var start, end;
    if (ctrl.setSelectionRange) {
        start = ctrl.selectionStart;
        end = ctrl.selectionEnd;
    } else if (document.selection && document.selection.createRange) {
        var range = document.selection.createRange();
        start = 0 - range.duplicate().moveStart('character', -100000);
        end = start + range.text.length;
    }
    return {
        start: start,
        end: end
    }
}

$("textarea").on("click keyup", function () {
    var caret = getCaretPosition(this);
    var endPos = this.value.indexOf(' ',caret.end);
    if (endPos ==-1) endPos = this.value.length;
    var result = /\S+$/.exec(this.value.slice(0, endPos));
    var lastWord = result ? result[0] : null;
    if (lastWord) lastWord = lastWord.replace(/['";:,.\/?\\-]$/, ''); // remove punctuation
    $("#atID").html((lastWord && lastWord.indexOf("@") == 0)?lastWord:"");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea>Follow me on twitter @mplungjan if you want</textarea><br/>
<span id="atID"></span>

Get occurence between @ and textarea current position

1 Answers1

Linked