How can i change hashtag color on textarea by jquery

Question

i wanna make hash tag on textarea like this

<textarea> hi #hash </textarea>

and change color of #hash like twitter

Answer 1

I made a plugin for this because I had the same problem. Look here: http://lookapanda.github.io/jquery-hashtags/

Answer 2

A simple suggestion (not tested):

As you cannot format a textarea, you can imitate it by using a div with the contenteditable attribute and a 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 you got answer to this one but if someone still wants a different solution other than the marked answer then please check this link. Hope it helps someone in future...

Answer 4

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

However changing a color of text is quite another business, since you cannot directly style textarea. I've have managed to accomplish it with combined, a little hacky solution:

• At first you must use <div> with attribute contenteditable and not <textarea>

• To automatically highlight text, you must wrap all your #hashtag mentions with another inline html element that you can style e.g. <span style="...">. RegEx nicely does the trick here:

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

• However text replacing on keyup creates another problem - it resets your text cursor so it is virtually impossible to type. To solve this issoe, Rangy comes to help. It is text selection library that provides some utilities to manipulate cursor position in text field. To keep cursor in position you must save it before you apply text replace and reset it after it happens. Here is full 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);
  });
  

Answer 5

You can't do it in a <textarea>. You'd need to do it in a <div> and write a set of keyboard handlers to update the content as the user types. This is not a straightforward task. look at using something like CKEDITOR, although I suspect that's not really the tool for your job.

Answer 6

Since textareas don't support markup allowing you to color specific words or expressions, what you will need to do is create a <div> that you can bind a keyup event to in javascript or jQuery. By using this keyup event you can insert the typed letter into the div as if someone were typing in a text area. Next, to color the particular hashtag, you would need to create a regular expression, then use the replace function to wrap it in a <a> tag and add all necessary properties.

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

Answer 7

I think CodeMirror or a similar editor would solve your problem -- just add a custom highlighter. The only thing is that the editor should probably support variable width fonts, but I think CodeMirror supports that.