JSFiddle - React, Tailwind, and code Playground

by Евгений

HTML

<p>пример: ыафшisd i выаiыва iыва фывi ыафшIsd I выаiыва Iыва фывI
<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>
<div class="wrap">
    <input type="text" class="tt_latin-verify" placeholder="введите слово кириллица плюс латинская i" />
</div>

CSS

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

JavaScript

function latinVerify(el) {
        var errorMsg;
        var regexp = /(i)(?=[ёа-я])|([ёа-я])(i)/ig;// поиск английской "I", граничащей с кириллицей
        var text = el.value;
        if(/i(?=[ёа-я])/ig.test(text) || /([ёа-я])i/ig.test(text)) {
            text = text.replace(regexp, function (d, a, b, c) {
                return (b ? b : '') + '<i>' + (a ? a : c) + '</i>'
            });
            if ($(el).next().is('.tt_error-msg')) {
                errorMsg = $(el).next();
            } else {
                errorMsg = $('<p/>', {class:  'tt_error-msg'});
                $(el).after(errorMsg);
            }
            $(errorMsg).html(text);
            $(errorMsg).append(' <span title="Выделены латинские буквы i. Кликните на ту, которую необходимо заменить на украинскую">(?)</span>');
        } else if ($(el).next().is('.tt_error-msg')) $(el).next().remove();
    }
function latinReplace(el) {// заменяем английские буквы на украинские в input'е
        var errorMsg = el.parentNode;
        var input = errorMsg.previousSibling;
        el.innerHTML = el.innerHTML == 'I' ? 'І' : 'і';
        $(errorMsg).find('span').remove();
        input.value = errorMsg.innerHTML.replace(/(<i>)|(<\/i>)/gi, '');
        latinVerify(input);
    }


$(function(){
    $('.tt_latin-verify').on('input propertychange', function() {latinVerify(this);});
    $(document).on('click', '.tt_error-msg > i', function() {latinReplace(this)});
})