javascript - Underlining text of a textarea

Question

I would like to add a colored wiggly underline to certain text fragments of a <textarea> element. The effect would be similar to that of spell checkers.

How can I do this with javascript, possibly with the help of jquery?

The only control I have over the html markup is through javascript. My first thought was to add styles to those text fragments, but as far as I know, one can only style the entire textarea element, not individual text fragments.

I know what I am trying to achieve is possible, as there is commercial software achieving a similar effect, but I'm still trying to figure out what are the tricks involved.

Answer 1

I dont think this is possible within a textarea, most WYSIWYG editors online use a contenteditable div or iframe made to look like a textarea to style the text within the innerHTML of those elements and therefore display on the front end, you can then get the textContent or innerText of the div/iframe. Using jQuery you could do something like:

<div contenteditable='true' id='editor'>this is the wrd</div>


$('#editor').html($('#editor').html().replace("wrd", "<span style='color: red;'>wrd</span>"));

not tested at all but should style the div correctly. you could then use $('#editor').text() to retrieve the text value.