JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<div id="result">
</div>

CSS

.red {
    color:red
}
.green{
    color: green
}

JavaScript

var chars = "[a-z0-9!#$%&'*+/=?^_`{|}~-]",
    local = '(?:' + chars + '\\.?){0,63}' + chars,

    label = '[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?',
    hostname = '(?:' + label + '\\.)*' + label;

    octet = '(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)',
    ipv4 = '\\[(?:' + octet + '\\.){3}' + octet + '\\]',

    domain = '(?:' + hostname + '|' + ipv4 + ')';

var regex = new RegExp('^' + local + '@' + domain + '$', 'i');

var tests = [
'"Abc\\@def"@example.com',
'"Fred Bloggs"@example.com',
'"Joe\\\\Blow"@example.com',
'"Abc@def"@example.com',
'customer/[email protected]',
'\\[email protected]',
'!def!xyz%[email protected]',
'[email protected]',
    'foo@mylocalmachine'
    ]

for(var i=0, max=tests.length; i<max; i++){
    var line = ["<span>", tests[i],' : ']
    if(tests[i].match(regex)) line.push('<span class="green"> ok </span>')
    else line.push('<span class="red"> ko </span>')
    var div = document.createElement('div')
    div.innerHTML = line.join('')
    document.getElementById('result').appendChild(div)
}