JSFiddle - React, Tailwind, and code Playground

HTML

<div id="divEdit" contenteditable="true">badaddress1.com;goodaddress1@123.com;goodaddress2@123.com;badaddress2.com</div>
<div id="btnSubmit">Click to test email addresses</div>

CSS

#divEdit {
    background-color: #fff;
    border: 1px solid #000;
    padding: 5px;
    width: 400px;    
    line-height:15px;
    height:45px;
    overflow:auto;
}

.red {
	color:#ff0022;
}

#btnSubmit {
    border:1px solid #000; 
    margin:5px 0;
    padding:5px;
    cursor:pointer;
    width:200px;
}

#btnSubmit:hover {
    color:#fff;
    background:#000;
}
}

JavaScript

$('#btnSubmit').click(function() {
		var textEntered = $('#divEdit').text();
		var textResult = [];
		$.each(textEntered.split(';'), function(index, item) {
			if (item.match(/^\S+@\S+\.\S+$/)) {
				textResult.push(item);
			}
			else {
				textResult.push('<span class="red">' + item + '</span>');
			}
		});
		$('#divEdit').html(textResult.join(';'));
	});