How to live-style an user input using javascript/jquery

Question

im searching for a libary or suggestions for making a real time styler in javascript/jquery. The idea is that my users have a html text input, i need to detect in real time some patterns and apply an style to it, for example is the user writes #some_text all after the # should be considered like a tag a have to be bold like #some_text.

Im very new at javascript so i have no idea of where to begin, i did some research but i didn't find any already made libary. Thanks for any help and suggestions!

Answer 1

What about something like jQuery Tagit?

You could initialize it like this:

<script>
        $(function() {
            var availableTags = [
                "#some_text1",
                "#some_text2",
                "#some_text3"
            ];

            $('#tags').tagit({tagSource: availableTags});
        });
</script>

<ul id="tags"></ul>

Answer 2

Something like that is used right here, on this website. Whenever you write a question or an answer in the editor, you get a live update in the area below. When you apply formatting it's updated in real-time in the preview area.

This uses a standard mark-up syntax called Markdown. What's good about that is that there are many tools that support Markdown, so you can find integrations for jQuery and even offline editors (Windows and Mac).

Check this question and its answers for some editors that do this.

Also check out the stand-alone version of the Stack Overflow editor.

Answer 3

maybe this helps you a little bit to understand what you have to do:
http://jsfiddle.net/EeGxs/3/
All I did is add an event listener to 'keydown' which means a key is pressed, and then you just have a look if there is a '#' in the line and if you add it to the p -tag which is bold. Its only a demonstration.