How to replace some text in a text area when a link is clicked

Question

I'm trying to find and replace a users website address with their shortened url in a text area when a link is clicked. I haven't got very far but at the moment I can get it to replace all the text in the text area

<a href="javascript:;" class="short_url_link"><%= @user.short_url %></a>

$(function(){
  $(".short_url_link").click(function(){
  $( "#mention" ).val($(this).text());
 });
});

So when the user clicks on the short url link the website address ( @user.website ) in the text area is found and replaced with the short url ( @user.short_url )

Answer 1

$(function(){
  $(".short_url_link").click(function(e){
   e.preventDefault();
  $( "#mention" ).val($(this).text());
 });
});

reference event.preventDefault

Answer 2

What about doing the things like that:

$(function(){
    $(".short_url_link").click(function(){
        var mention = $("#mention");
        var prevousText = mention.text();
        var shortURL = $(this).text();
            var regex = new RegExp(("<%= @user.website %>").replace(/\//g, "\\/").replace(/\./g, '\\.'), "i");
        mention.val(previousText.replace(regex, shortURL));
    });
});