Javascript - Change font color of certain text in textarea

Question

Is there any JS function that can change the color of certain text in a textarea?

For example, blar blar {blar} blar, {blar}, including { }, will be in blue. Other words will be in blank. In other words, all I need is a function that can change color of all text in { }.

I've done some studies and it seems that most people say it can't be done. But I'm seeing rich text editors or those wysiwyg editors having the ability to bold or underline words. There must be a way to do it.

Any suggestion is welcome.

Answer 1

you can't use a textarea to do that, per se.

But, javascript is your friend. Perhaps you should take a look at the code of a few rich text editors.

You could start with lwrte, since it says its "lightweight". Also, its written in jquery so it will be pretty easy to undertand. (and I'm a jquery fanboy).

Hope that helps,

jrh

Answer 2

wysiwig-editors are using iframes instead of textareas. Textareas are very little customizable, since what you're after is changing part of the content. You can't add tags inside a textarea, which makes it impossible to only change part of the text.

If you look at the editor here in SO, you write normal text inside a textarea, and it is then transformed in the box below it, so you'll see the asterix inside the textbox, but in the box below, it'll transform special characters by regexing them with tags.

If you're using firebug, you can start writing inside the editor, while looking at the HTML in the preview-box.

Answer 3

No one mentioned contentEditable?
Just make a contentEditable div and use javascript to style it.
I reccommend you to look into the Dojo Toolkit's.
It has a Editor widget.

Other resources:
Some contentEditable problems in IE.
How to use contentEditable with jQuery or without it.

Answer 4

hi i have to implement find and replace functionality in my project. in this functionality there is one find and replace button on the top of contenteditable div. when user click on this button, popup window will open and ask for the search word when specify word and press find it will find word in that div only. and if match found it will highlight that word. so anybody tell me how can i highlight word in div. its urgent so please . thank you.

Answer 5

I Think You will need to use execCommand method of javascript it controls many thing such this stuff of changing specifc textcolor

Regards

Answer 6

But some Jquery WYSIWYG editors do this ! How is that possible ? See this editor lwrte