JQuery selects words in an editable div

Question

I have an editable div and would like to highlight (apply the css class) to certain words. WHILE user is still typing in a div.

How do I do this using jQuery?

I tried using div.html().replace() , etc., but it replaces it and then moves the cursor to the very beginning.

Answer 1

Changing the html for the editable div will directly cause problems - when you save, you won’t be able to tell the difference between the change made by the user and what is done using the highlight script.

However, you can force the user to edit a simple text element, making it look like editing the selected element. Add a second div on top of your editable div with an event-pointer-style: none and a transparent background. As long as both elements have the same font size, you will edit the plain text version, but see the colors from the selected version.

If the font size is fixed, you can go ahead and use the text box instead of the editable div. I used this approach to get an syntax highlighting editor running on an iPad that does not support inline HTML editing.