1

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:

Imagem 1

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

Imagem 2

  • E por fim, o ultimo problema que eu descobri, é que nada acontece quando colocamos uma outra palavra a frente ou depois:

imagem 3

Resultados que eu estou obtendo, resumidos em uma imagem + saída html):

Meusresultados

Os resultados que eu preciso obter (imagem + saída html):

Imagem 4

Imagem 5

Imagem 6

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.

1 Resposta 1

0

Sugestão: nomeie suas variáveis de forma mais clara. a, b e c podem ser qualquer coisa, e você vai acabar trocando as bolas em algum ponto.

No seu switch, o valor sendo "condicionado" é o c: O texto completo do <textarea>.

Claro que, assim, se seu texto no <textarea> não for exatamente o que está no case, a substituição não acontece.

Corrigi o código, veja abaixo:

$( "textarea" )
.bind('input propertychange', function() {
    var keywords = ["test", "div", "<", ">", "iframe"];
    var regex = new RegExp(keywords.join("|"), 'ig');

    var text = $(this).val();
    var formatted = text.replace(regex, function (match) {
        switch (match) {
            case "<":
            case ">":
            case "iframe":
            case "div":
                z = '<span class="high2">' + match + '</span>';
                return z;
                break;
            default:
                return '<span>' + match + '</span>';
        }
    });
    
    document.getElementById("boom").innerHTML = formatted;
});
* {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>


Note também que eu inclui case "<" e case ">", e tirei o < e > dos outros cases. Isso porque o match da regex, dadas as suas keywords, não inclui esses caracteres para o iframe e para o div, por exemplo.

Além disso, dá pra melhorar a responsividade do seu editor trocando o keydown por bind('input propertychange'), que é bem mais rápido em detectar mudanças no <textarea> (e detecta cortar e colar também, mesmo sem o teclado!).

Obs.: Já aviso que esse código (não só o que eu mudei, o original também) vai ficar bem devagar para textos muito grandes, e pode precisar de algumas otimizações em termos de tratamento de texto.

2
  • obrigado! bem, eu gostei da forma com a qual você explanou o código. Felizmente eu revisei uma outra versão desse código que eu havia feito e acabei chegando onde queria, se você quiser dar uma olhada eu posso compartilhar na questão, pois uma ajudinha é sempre bem-vinda. hehe!
    – Lima
    25/06/2019 às 11:07
  • Nesse caso eu sugeriria criar outra questão, a menos que o problema persista x). De toda forma, minhas recomendações continuam a valer: cuidado com o nome das variáveis, e tente trocar o keyup pelo evento que eu passei.
    – GBrandt
    25/06/2019 às 11:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .