1

Eu tenho uma DIV que é editavel pelo usuario, só que eu queria que quando ee escrevece Brasil ele ficace somente esta palavra verde tabem como EUA ficase vermelho, mas somente palavras determinadas.

Codigo da DIV:

<div id="texto" contenteditable = "true" ></ div>
8
  • Como o usuário edita a div? O texto é carregado dentro de uma caixa de texto e depois salva por um botão? Commented 4/03/2016 às 13:17
  • Teria como colocar o código que você esta utilizando?
    – David
    Commented 4/03/2016 às 13:24
  • Você pode criar uma class CSS e quando for brasil chama a class .verde se for estados unidos a class .vermelho Commented 4/03/2016 às 13:24
  • @ViníciusBastos não é salva ainda, e ele acaba editando pela tag contenteditable = "true"
    – Daniel
    Commented 4/03/2016 às 13:25
  • @DanielSaraiva como assim podia dar + detalhes ou ate um exemplo?
    – Daniel
    Commented 4/03/2016 às 13:26

3 Respostas 3

1

Você pode pegar o evento de keyup e pesquisar no texto se existe uma ocorrência da palavra, existindo esta palavra no texto basta substitui-la fazendo um replace, como o próprio nome diz, e adicionar alguma tag para incluir o seu estilo.

Você pode melhora-la de várias formas, mas de base você poderia realizar algo como:

HTML:

<div id="text" contenteditable="true">O </ div>

JS:

var text = document.getElementById('text');


text.onkeyup = function(evt) {
    var counter = this.textContent.split(/(Brasil)/i).length;

  if (counter > 1 && (!this.lastCount || this.lastCount < counter) ) {
        this.lastCount = counter;
    this.innerHTML = this.textContent.replace(/(Brasil)/g, "<b class='green'>Brasil</b>&nbsp;");

        var range = document.createRange();
    var sel = window.getSelection();
    var lastNode = text.childNodes.item(text.childNodes.length -1)
    range.setStart(lastNode, 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
  }
};

CSS:

.green{
  color:green;
}

Veja funcionando no jsfiddle

1

Como mencionei no comentário, não sei qual evento você usaria para chamar a função. Mas encontrando, uma opção é: ao salvar o texto, use o replace com expressão regular para inserir elementos span em volta das palavras, com os styles correspondentes.

var palavrasCores = {Brasil: "green", EUA: "red"};
var resultado = textoObtido.replace(/Brasil|EUA/gi, function(palavra){
    return '<span style="color: ' + palavrasCores[palavra] + '">' + palavra + '</span>';
});
0

function checkKey() {
var plaintext = document.getElementById("textbox");
if(plaintext.value == 'EUA') {
      plaintext.style.color = "#FF0000";
}
if(plaintext.value == 'BRASIL') {
      plaintext.style.color = "#66CD00";
   }
   if(plaintext.value != 'EUA' && plaintext.value != 'BRASIL') {
      plaintext.style.color = "#000000";
   }
}
</script>
<input type="text" id="textbox" name="plaintext" onKeyUp="checkKey()">

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 .