Mudar cor de uma substring

[Alex Fernandes]

Fala galera!

Tenho 2 textArea, o primeiro já com informação, no segundo o usuário digitará o que esta no primeiro textArea. Quero que na medida que for digitando no segundo textArea, os caracteres do primeiro mude de cor, exemplo:

teste area 1

abcd (em azul)

ai no 2° teste area, o usuário digitou ab, então as letras ab no primeiro testArea muda de cor, como fazer isto? Desde já agradeço.

Na verdade preciso apenas de saber mudar a cor de uma subString especifica, como: ALEX o E ser de outra cor.

 

Editado Fevereiro 18, 2018 por Alex Fernandes

[RpgBoss]

Você teria que fazer o primeiro TEXTAREA ser uma DIV, por que não se pode estilizar partes de texto dentro de TEXTAREA.

Confirmar pra mim se você que fazer um editor de códigos com HTML+Javascript.

[Alex Fernandes]

Obrigado por responder. Então com o text area não há como mudar a cor de parte da digitação, é isso? 

O que estou fazendo é um programa de treinamento de digitação, o usuário tem o texto no 1° textarea e digita no 2° textarea, se ele errar um caracter é incrementado uma variavel mostrando quantos ele errou, tb tem um tempo para concluir o exercicio. Consegui fazer tudo que eu precisava, mas quero esse efeito para o usuário ter esse feedback, onde o 1° textarea muda de cor seu caracteres a medida que o usuário já digitou, acertando ou errando, se ele digitou 5 caracteres de uma palavra com 10, os 5 mudem de cor.

Estou fazendo em html/CSS e JavaScript/Jquery

 

Editado Fevereiro 25, 2018 por Alex Fernandes