JSFiddle - React, Tailwind, and code Playground
HTML
<textarea>some text with wrong wrd</textarea>
CSS
.jquery-spelling-incorrect
{
color:red;
text-decoration:underline;
}
JavaScript
var dictionary = ['some', 'text', 'with', 'wrong', 'words'];
jQuery('textarea').hide().before('<div class="jquery-spelling-container" contenteditable="true"/>');
jQuery('.jquery-spelling-container').html(jQuery('textarea').val()).keyup(function(){
jQuery('textarea').val(jQuery(this).text()); //take the plain text, not the span
var words = jQuery(this).text().split(' ');
for (var i = 0; i < words.length; i++)
{
if(dictionary.indexOf(words[i]) == -1) // your function here to test for correct spelling
{
words[i] = '<span class="jquery-spelling-incorrect">' + words[i] + '</span>';
}
}
jQuery(this).html(words.join(' '));
});