How to change the color of hashtags on textarea using jquery

Question

I want to make a hash tag on textarea like this

<textarea> hi #hash </textarea> 

and change the color of #hash as twitter

Answer 1

I made a plugin for this because I had the same problem. See here: http://lookapanda.imtqy.com/jquery-hashtags/

Answer 2

Simple sentence (not verified):

Since you cannot format a text field, you can simulate it using a div with the contenteditable attribute and simple CSS formatting:

 <div id='textarea' contenteditable style="overflow: scroll; border: 1px solid black; width: 200px; height: 100px;"></div> 

Then a few lines of JavaScript (and jQuery):

 // when user finished editing $('#textarea').blur(function() { // replace hashtags (parsing should prob. be enhanced) $(this).html($(this).html().replace(/(#\S+)/, '<span style="color: blue">$1</span>'); }); 

Answer 3

I know that you got the answer to this question, but if someone else wants a solution other than the marked answer, please check this link . Hope this helps someone in the future ...

Answer 4

You cannot do this in <textarea> . You need to do this in a <div> and write a set of keyboard handlers to update the content as a user. This is not an easy task. look at using CKEDITOR , although I suspect that this is not a tool for your work.

Answer 5

Since textareas does not support markup that allows you to colorize specific words or expressions, you will need to create a <div> with which you can associate the keyup event with javascript or jQuery. Using this keyup event, you can paste the entered letter into a div, as if someone were typing a text area. Then, to color the specific hashtag, you need to create a regular expression, then use the replace function to wrap it in the <a> tag and add all the necessary properties.

I found this cool tutorial on parsing tweeter-like user names and hashtags: http://www.simonwhatley.co.uk/parsing-twitter-usernames-hashtags-and-urls-with-javascript

Answer 6

I think CodeMirror , or a similar editor, will solve your problem - just add a custom marker. The only editor should probably support variable-width fonts, but I think CodeMirror supports this.

Answer 7

This is not a problem if you just want to highlight text in textarea - in this case jquery-hashtags does a pretty good job.

However, changing the color of the text is another matter, since you cannot directly format textarea. I managed to accomplish this with a joint, slightly hacked solution:

• You must first use a <div> with the contenteditable attribute, not the <textarea>

• To automatically select text, you must wrap all your #hashtag links with another built-in html element that you can create, for example. <span style="..."> . RegEx does a beautiful trick here:

   //Bind this on keyup event var text = text.replace(/<\/?span>/g, '').replace(/([#]+[A-Za-z0-9-_]+)/g, '<span>$1</span>'); 

• However, replacing text on the keyboard creates another problem: it resets the text cursor, so it is almost impossible to type. To solve this problem, Rangy comes to the rescue. This is a text selection library that provides some utilities for controlling the cursor position in a text field. To keep the cursor in position, you must save it before applying text replacement and reset after it is completed. Here is the complete code:

   $("#notes-editor").on("keyup", function(){ var text = $(this).html(); text = text.replace(/<\/?span>/g, '').replace(/([#]+[A-Za-z0-9-_]+)/g, '<span>$1</span>'); savedSel = rangy.getSelection().saveCharacterRanges(this); $(this).html(text); rangy.getSelection().restoreCharacterRanges(this, savedSel); });