JSFiddle - React, Tailwind, and code Playground

by Евгений

HTML

<p>пример: набoр букв раznih latinskih и нe ОЧEНЬ latіnskіh. А тAкжЕ в sdЄІsЁ sd78</p>
<div class="wrap">
    <input type="text" class="tt_latin-verify" placeholder="введите слово кириллица плюс латинская i" />
    <p>ghsdfq</p>
</div>
<div class="wrap">
    <input type="text" class="tt_latin-verify" placeholder="введите слово кириллица плюс латинская i" />
</div>
<div class="wrap">
    <input type="text" class="tt_latin-verify" placeholder="введите слово кириллица плюс латинская i" />
</div>

CSS

.tt_error-msg {
    color: gray;
    margin-top: 0;
}
.tt_error-msg > i {
    color: red;
    font-weight: bold;
    font-style: normal;
    text-decoration: underline;
}
.tt_error-msg > span {
    color: blue;
    cursor: help;
    font-weight: bold;
}
/* */
.wrap {
    margin: 20px;    
}
.tt_latin-verify {
    width: 500px;
}

JavaScript

function latinVerify(el) {
	var regexp = /([a-z]+)(?=[^a-z\s$]+)|([^a-z\s^]+)([a-z]+)/ig;
	var errorMsg = el.nextSibling;
	var text = el.value;
	if (regexp.test(text)) {
		text = text.replace(regexp, function (d, a, b, c) {
			return (b ? b : '') + '<i>' + (a ? a : c) + '</i>'
		});
		if (!errorMsg || errorMsg.className != 'tt_error-msg') {
			errorMsg = document.createElement('p');
			errorMsg.className = 'tt_error-msg';
			el.parentNode.insertBefore(errorMsg, el.nextSibling);
		}
		errorMsg.innerHTML = text + ' <span title="Выделены латинские символы в словах, содержащих не латинские символы">(?)</span>';
    } else if (errorMsg && errorMsg.className == 'tt_error-msg') errorMsg.parentNode.removeChild(errorMsg);
}
$(function(){
	$('.tt_latin-verify').bind('input propertychange', function() {latinVerify(this);});
})