How to change a single character color in textarea

Question

Please i need to change color of a single character in textarea using JQuery.

Add more requirements and please show how far you got. – Sgoettschkes Mar 26 '12 at 14:23 — Sgoettschkes, Mar 26 '12 at 14:23

score 3 · Answer 1 · answered Mar 26 '12 at 14:24

3

You can't. A textarea is plain text only. That's why, for example, HTML inside a textarea is rendered literally (except for </textarea>).

answered Mar 26 '12 at 14:24

Niet the Dark Absol

320,036
81
464
592

2

[Live under a rock much?](http://www.strangeplanet.fr/work/jquery-highlighttextarea/) – bzlm Mar 26 '12 at 14:27
Hax. It is ugly, especially when scrolling, editing or resizing, or just generally doing anything other than looking at the textarea. And if the only point of a textarea is to be looked at, why bother making it a textarea? – Niet the Dark Absol Mar 26 '12 at 14:30
@bzlm: this would be cool if the textarea didn't have to be sized using known values - i.e. it doesn't like `position:absolute;top:0;bottom:0;'. That it whacks a bunch of wrapper divs around the box too is annoying. And that the font rendering is nasty.. i mean, http://ace.c9.io/ is neat but overkill if you just want to highlight text! For me, this solution has potential in some corner cases... – frumbert Aug 25 '14 at 05:41

score 3 · Accepted Answer · answered Mar 30 '12 at 09:47

I changed the textarea by a content editable div:

<div contenteditable="true"></div>


div {width:98%;clear: both;font-size: 10pt;max-width:98%;height:250px;min-height:98%; 
      left:10px;right:10px;background-color:#fff;border:1px solid #1c578d;bottom:10px;top:10px;color:#1B4A90;overflow:auto;
      display:inline;}

score 0 · Answer 3 · answered Apr 10 '15 at 08:27

0

Use this jQuery plugin: jQuery.colorfy

https://github.com/cheunghy/jquery.colorfy

Demo here: http://cheunghy.github.io/jquery.colorfy/

answered Apr 10 '15 at 08:27

Zhang Kai Yu

362
2
8

score 0 · Answer 4 · answered Nov 13 '22 at 05:45

Change color of @ Username # Hashtag and link with clickable

Pure Vanilla JavaScript

const linkGenerator = ( contentElement, baseUrl ) => {
  const elem = document.querySelector(contentElement);
      elem.innerHTML = elem.innerHTML
        .replace(/(https?:\/\/[^\s]+)/g, `<a class='link' href="$1">$1</a>`)
        .replace(/(@[^\s]+)/g, `<a class='username' href='${baseUrl}/$1' title='$1'>$1</a>`)
        .replace(/(#[^\s]+)/g, `<a class='hashtag' href='${baseUrl}/$1'>$1</a>`)
        
  return elem
}

linkGenerator( '#myContent', 'https://www.any-domain.net');

linkGenerator( '#myContent2', 'https://www.any-domain.org');

.link { color: navy; }
.username { color: green; }
.hashtag { color: orange; }

<div id="myContent">Dear @You, Welcome to @StackOverflow</div>

<div id="myContent2">Hello @World, from @GMKHussain
Trending now! #Hastag

  https://any-domain.net
</div>

score 0 · Answer 5 · answered Mar 26 '12 at 14:29

0

This isn't a full answer, but in HTML5 there is the contenteditable attribute. Here is a link to an example. This does support specific styling.

answered Mar 26 '12 at 14:29

Brian Warfield

367
1
11

score 0 · Answer 6 · answered Mar 26 '12 at 14:29

The only way to do that would be to create your own "element". For example, create an empty div, and a focus handler which would enable the key press listener - the key press handler would then at the pressed character to the html of the div. If the char is the one (or one of those) you want you'd add a span (for example) around it to style it. Of course, you'll have to be able to handle things such as holding down a keyboard key should keep adding the same char, also you'd need to handle deleting via delete, backspace, and selection, etc. A lot of stuff to do just to be able to highlight a char.

score 0 · Answer 7 · edited May 23 '17 at 11:52

0

You can't change colors, but what you can do is select a particular character (highlight by way of JavaScript.)

See Highlighting a piece of string in a TextArea

edited May 23 '17 at 11:52

Community

1
1

answered Mar 26 '12 at 14:29

pp19dd

3,625
2
16
21

How to change a single character color in textarea

7 Answers7

Linked