У меня есть строка текста в текстовой области, как показано ниже

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

Теперь я хотел бы изменить цвет слова какого-либо персонажа, как показано ниже. введите описание изображения здесь

Я не хочу менять тег HTML textarea для отображения этого текста. Я хотел бы реализовать это с помощью jQuery. Как я могу это сделать?

2
Optimus Prime 8 Янв 2017 в 11:31

3 ответа

Лучший ответ

Вот решение. но код JQuery выполняется только один раз

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>

Можно разделить цвет текста, если вы используете элемент contenteditable.

Вот скрипка раскраски отдельных символов на лету:

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

3
Banzay 8 Янв 2017 в 11:39

Попробуй это:

<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>
0
Adam Patterson 8 Янв 2017 в 09:08

Вы не можете изменить цвета, но вы можете выбрать определенный символ (выделите с помощью JavaScript.)

См. Выделение фрагмента строки в TextArea

0
Community 23 Май 2017 в 12:24