Bem eu ainda estou aprendendo um pouco mais sobre javascript, e estou usando um pouco de jquery ultimamente, esse código é um dos meus trabalhos mais recentes, trata-se de um editor de código.
Como ele funciona?
Primeiro, temos algumas palavras armazenadas em uma arraylist e uma condicional switch.
Segundo, capturamos os eventos com uma função
keyup
e ativamos também uma outra função que vai capturar todo o valor digitado pelo usuário dentro de um campo<textarea>
supostamente comparando com as palavras de nossa arraylist e switch, e finalmente, jogando todo esse valor para uma<div>
.
Em algoritmo seria algo como:
Obtenha todo o valor digitado em
<textarea>
Verifique as palavras, salve as que não passaram na comparação em 'x', e em seguida salve aquelas que passaram (e que supostamente vão mudar de cor) em 'y'.
Insira esse valor no elemento
div
especifico 'x' respeitando as regras anteriores (separando e reunindo as palavras que mudarão de cor (mais) as que não mudarão de cor).
O meu problema:
Quando um valor é digitado e passa por todo o processo de verificação, o resultado é inserido em nossa <div>
mas logo depois de inserir uma nova palavra, aquela palavra que mudou de cor anteriormente é perdida, retornando a sua cor padrão.
O problema em prática:
- O usuario digitou
<iframe>
e esse resultado apos a verificação é inserido dentro de uma<div>
como na foto a seguir:
- O usuario digitou
<iframe>
mas também apertou a tecla de espaço, e o valor anterior de<iframe>
com a sua cor, foi perdido. Temos o seguinte resultado:
- E por fim, o ultimo problema que eu descobri, é que nada acontece quando colocamos uma outra palavra a frente ou depois:
Resultados que eu estou obtendo, resumidos em uma imagem + saída html):
Os resultados que eu preciso obter (imagem + saída html):
Para finalizar o tópico, vamos ao meu código:
$( "textarea" )
.keyup(function() {
var a = ["test","div","<",">","iframe"];
var b = new RegExp(a.join("|"), 'ig');
var c = $( this ).val();
var d = c.replace(b, function (x) {
switch (c) {
case "<iframe>":
z = '<span class="high2">'+x+'</span>';
return z;
break;
case "<div>":
z = '<span class="high2">'+x+'</span>';
return z;
break;
default:
return '<span>'+x+'</span>';
}
});
document.getElementById("boom").innerHTML = d;
})
.keyup();
* {box-sizing: border-box;}
.def {white-space: pre-wrap; overflow: auto; font-family: monospace; font-size: 1rem; padding: 0.5rem; caret-color: white;}
.dark {resize: none; position: absolute; z-index: 1; color: transparent; background-color: transparent; float: left; width: 50%; height: 100px;}
.darke {background-color: #444; color: white; position: absolute; float: left; width: 50%; height: 100px;}
.high {color: blue; font-family: monospace; font-size: 1em;}
.high2 {color: red; font-family: monospace; font-size: 1em;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<textarea id="target" class="dark def"></textarea>
<div id="boom" class="darke def"></div>
Obrigado, antecipadamente.