JSFiddle - React, Tailwind, and code Playground

by Pylyp Borysov

HTML

<h1>Проверка наличия в тексте латинских (a-z, A-Z) букв</h1>
<textarea id="txt" placeholder="Вставьте сюда проверяемый текст"></textarea>
<input type="button" id="start" value="Проверить">
<p id="legend">Латинские буквы в исходном тексте выделены красным цветом:</p>
<div id="output"></div>

CSS

#txt {
    width: 600px;
    height: 200px;
}
#start {
    width: 100px;
    height: 30px;
    display: block;
}
#legend {
    display: none;
    margin-bottom: 10px;
}
span {
    color: red;
    font-weight: 700;
}
#output {
    white-space: pre-line;
}

JavaScript

$('#start').on('click', function(e){
    var str = $('#txt').val(),
        i = 0,
        newTxt = '';
    while (str[i]) {
        if (!str[i].search(/[a-z]/i)) newTxt += '<span>'+str[i]+'</span>';
        else newTxt += str[i]
        i++;
    }
    $('#legend').show();
    $('#output').html(newTxt);
});