如何使用jquery更改textarea中的特定字符颜色？

Question

我在textarea中有一行文字就像下面的

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

现在我想更改某些字符的颜色，如下所示。

我不想更改HTML textarea标记以显示此文本。我想实现是使用jQuery。我怎么能这样做？

Answer 1

这是一个解决方案。但jQuery代码只运行一次

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果使用contenteditable元素，则可以分隔文本的着色。

这是在飞行中着色特定字符的小提琴：

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

Answer 2

你无法改变颜色，但你可以做的是选择一个特定的角色（通​​过JavaScript突出显示。）

请参阅Highlighting a piece of string in a TextArea

Answer 3

试试这个：

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