Add or replace email provider suffix in an email input-CodePudding

After you'd click on one of the buttons, it should fill or replace the text, so its a valid E-Mail Adress.

For example, if you have test123 and click on the gmail-button, it should insert @gmail.com after it.
But if you have [email protected], it should remove the "@outlook.com" and replace it with the text on the button. (clicking on gmail-button = [email protected] and so on...)

Short form:
If you click onto the button, remove all after the "@" and replace it with the text that is in the button.

Update:

HTML:

<input type="text" value="" id="text" placeholder="Enter E-Mail Adress" style="width: 300px;" />
<br />
<input type="button" value="@gmail.com" id="gmail-button"/>
<input type="button" value="@outlook.com" id="outlook-button"/>

JS jQuery (3.4.1):

function cleanText(value){
    return value.replace(/(@. )$/, '')
}

$(function () {
    $('#gmail-button').on('click', function () {
        var text = $('#text');
        text.val(cleanText(text.val())   '@gmail.com');    
    });
});

$(function () {
    $('#outlook-button').on('click', function () {
        var text = $('#text');
        text.val(cleanText(text.val())   '@outlook.com');    
    });
});

CodePudding user response：

Using regular expressions you can easily remove the suffixes. Try this:

function cleanText(value){
    return value.replace(/(@. .com)$/, '')
}

$(function () {
    $('#gmail-button').on('click', function () {
        var text = $('#text');
        text.val(cleanText(text.val())   '@gmail.com');    
    });
});

$(function () {
    $('#outlook-button').on('click', function () {
        var text = $('#text');
        text.val(cleanText(text.val())   '@outlook.com');    
    });
});