Como faço para que toda vez que o navegador achar uma "palavra reservada" no textarea
, ele automaticamente mude a cor dela.
Eu quero saber para fazer um destaque de sintaxe.
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeNão é possível alterar partes do texto de um textarea
(bem como de um input
). Você consegue aplicar estilos (cor, fundo, tipo de fonte, tamanho etc.) ao texto por inteiro ou ao elemento, e não por partes dele. Isso porque o textarea
não renderiza tags HTML, e seu conteúdo é tratado como texto puro.
O que você pode fazer é usar plugins WYSIWYG que substitui o textarea
por uma div
editável e aplicar listeners que irão detectar as palavras reservadas no texto e aplicar a cor desejada somente nestas palavras (trabalho um pouco complicado, diga-se de passagem). Para isso você terá que pesquisar a forma que o JavaScript trata as instâncias do plugin e fazer uma programação à parte.
Alguns plugins WYSIWYG disponíveis, dentre outros, são o TinyMCE e o CKEditor.
Apenas como complemento à resposta do @DvD, mostro um exemplo muito simplista (e com algumas falhas) de como poderia implementar mudanças de cor de determinadas palavras utilizando <div>
com contenteditable=true
:
function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}
//palavras que se pretende substituir e a classe com o estilo para essas palavras
const sintaxe = [
{
palavra:"int",
classe:"tipo"
},
{
palavra:"if",
classe:"base"
}
];
$("#editor").on("keyup", function(){ //aplicar a troca para cada tecla digitada
let cnt = $("#editor").html();
for (s of sintaxe){ //para cada palavra aplicar a substituição no editor
//fazer o troca da palavra por um span com mesma palavra e a classe certa
cnt=cnt.replace(s.palavra+" ", `<span class="${s.classe}">${s.palavra}</span> `);
}
$("#editor").html(cnt); //colocar o texto substituido de volta
//colocar o cursor no fim de novo
placeCaretAtEnd(document.getElementById("editor"));
});
#editor {
border:1px solid orange;
}
.tipo {
color:darkBlue;
}
.base {
color:purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Escreva algum texto como int x; if(x==10) {
<div id="editor" contenteditable="true"></div>
A função de colocação do cursor no fim veio de uma resposta no SOen e é necessário para que e exemplo funcione corretamente, uma vez que quando há uma substituição do html do <div>
por javascript o cursor volta ao inicio.
<textarea>
. A solução mais comum é utilizar uma<div>
com o atributocontenteditable="true"