How can i change hashtag color on textarea by jquery

问题

i wanna make hash tag on textarea like this

<textarea> hi #hash </textarea>

and change color of #hash like twitter

回答1:

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

回答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>');
});

回答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...

回答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);
});
```

回答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.

回答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

回答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.

来源：https://stackoverflow.com/questions/17517448/how-can-i-change-hashtag-color-on-textarea-by-jquery

标签

jquery

twitter

textarea