How can I create an html text input area so that I can underline or format specific words?

Question

I need to enter an input field in which I can have javascript set for certain attributes for different parts of the input field. A simple example to demonstrate what I would like to do: let me want to emphasize all the cursed words in the input text area. Thus, javascript will check the input text area when inserting a new letter, and for any words matching my array of recognized curse words, this will underline this word. Please note: I do not want the user / client to be able to set any text attributes, I just want javascript to format certain words differently than the others (so no toolbars or anything like that). I also want the window to look exactly like a regular text area in all other respects.

I already know about some rich text editors (such as juju and lwrte), as well as some syntax highlighting, but I'm not sure if they do what I want.

So, does anyone know a tool that would allow me to do this?

thanks

Answer 1

You can make the div "contenteditable" by setting the attribute to true in the div. Then surround the relevant words with markup that does not affect the layout, but can be styled and easily removed later.

Something like that:

<style type="text/css"> .content { border: 5px inset #000; padding: 5px; } .content .curse { color: #f00; font-weight: bold; text-decoration: underline; } </style> <div contentEditable="true" class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat gravida tempus. Vivamus convallis, purus dictum bibendum ullamcorper, neque ipsum aliquam ligula, sit amet imperdiet est ante non nisl. Mauris dignissim libero et urna iaculis at iaculis metus semper. Sed ac nisl eu arcu molestie pretium quis quis ligula. Cras vitae enim vitae lacus molestie dictum. Donec rutrum tincidunt augue, vel pretium lectus faucibus ut. In consequat diam accumsan urna fermentum vitae tincidunt ipsum rutrum. Curabitur sagittis, ante a viverra fringilla, orci urna feugiat urna, eu ultricies lacus odio adipiscing risus. Sed pellentesque blandit ipsum vel hendrerit. Nulla nibh mauris, egestas sed consectetur et, lobortis in dolor. Curabitur eu ante lectus. Cras consequat, dui sed pellentesque tempor, purus turpis egestas sapien, in fermentum eros tortor vel mi. Integer accumsan, augue id elementum pretium, est quam vehicula nisl, at congue purus sem quis ipsum. Aliquam commodo, erat in euismod lacinia, tortor lectus interdum lacus, quis vestibulum augue nulla in tellus. </div> <script type="text/javascript"> $(document).ready(function() { var html = $('.content').html(); $('.content').html(html.replace(/lectus/gi, '<span class="curse">lectus</span>')); }); </script>