How can i change the specific character color in the textarea using jquery?

Question

I have a line of text in the textarea is like below

<textarea>This is a line of text for test.</textarea>

Now I would like to change the word color of some character is like below.

I don't want to change HTML textarea tag to display this text. I would like to implement is using jQuery. How can i do that?

do you know which alphabets you want to change the color of? are you sure the html will never change? — Muneeb Zulfiqar, Jan 08 '17 at 08:37
This may be help you out. http://stackoverflow.com/questions/26485729/how-can-i-color-specific-letters-in-html-element-text — Ataur Rahman Munna, Jan 08 '17 at 08:47

Banzay · Accepted Answer · 2017-01-08T11:39:21.143

3

Here is a solution. but jQuery code runs only once

var alpha = ["s","x","e","T"];
var res = "", cls = "";
var t = $("#txt").text();

for (i=0; i<t.length; i++) {
    for (j=0; j<alpha.length; j++) {
        if (t[i] == alpha[j]) {cls = "red";}
    }
    res += "<span class='"+cls+"'>"+t[i]+"</span>";
    cls="";
}
$("#result").html(res);

.red {
    color: red;
}
#result {
    font-size: 24px;
    font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="txt">This is a line of text for test.</textarea>
<div id="result"></div>

It's possible to separate coloring of text if you use contenteditable element.

Here is fiddle of coloring particular chars on the fly:

http://www.codeply.com/go/YHx9yphpHW

edited Jan 08 '17 at 11:39

answered Jan 08 '17 at 09:00

Banzay

9,310
2
27
46

I would like to see the result in a same textarea. I don't like to see the result in another result div. Is it possible? – Optimus Prime Jan 08 '17 at 09:27
I've appended an answer. look at link – Banzay Jan 08 '17 at 11:39

score 0 · Answer 2 · edited May 23 '17 at 12:24

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 12:24

Community

1
1

answered Jan 08 '17 at 08:46

Muneeb Zulfiqar

1,003
2
13
31

Adam Patterson · Answer 3 · 2017-01-08T09:08:34.917

Try this:

<textarea>This is a line of text for test.</textarea>

<script>
var counter = 0;
var newTextArea = new Array();
var currentText = $("textarea:first").val();

do{
    var currentLetter = currentText.charAt(counter);
    if(!(counter % 4)){
        $(currentLetter).css('color', 'red');
    }
    newTextArea.push(currentLetter);
    counter++;
}while(counter < currentText.length);

$("textarea:first").val(newTextArea.toString());
</script>

How can i change the specific character color in the textarea using jquery?

3 Answers3