digitar palavra "quero" e alterar cor automaticamente em javascript

1. digitar palavra "quero" e alterar cor automaticamente em javascript

eros18123
(usa Outra)

Enviado em 12/01/2024 - 19:34h

Boa tarde galera td bem? Tenho uma duvida e se puder me ajudar ficaria grato
Eu tenho um codigo html, js e css abaixo que quando eu digitar "quero", eu queria que alterasse a cor do texto automaticamente na parte que eu digito, em vez de mostrar um texto na linha de baixo, como mostra no codigo



<div id="text" contenteditable="true">{{edit:Frente}}</div> 

<p id="result"></p>



<script>

document.getElementById('text').addEventListener('keyup', function(){

    var str = this.innerHTML;

    var mapObj = {

       quero:"<span class='color-one'>quero</span>",

       brasil:"<span class='color-two'>brasil</span>"

    };

    var re = new RegExp(Object.keys(mapObj).join("|"),"gi");

    str = str.replace(re, function(matched){

      return mapObj[matched.toLowerCase()];

    });

    document.getElementById('result').innerHTML = str;

}, false);

</script>





#text {

    border: 1px dashed #CCC;

    min-height: 30px;

}

.color-one {

    background-color: gray;

    color: white;

}

.color-two {

    background-color: salmon;

    color: white;

}

0 0

Quote

2. Re: digitar palavra

msoliver
(usa Debian)

Enviado em 13/01/2024 - 00:04h

eros18123 escreveu:

Boa tarde galera td bem? Tenho uma duvida e se puder me ajudar ficaria grato
Eu tenho um codigo html, js e css abaixo que quando eu digitar "quero", eu queria que alterasse a cor do texto automaticamente na parte que eu digito, em vez de mostrar um texto na linha de baixo, como mostra no codigo



<div id="text" contenteditable="true">{{edit:Frente}}</div> 

<p id="result"></p>



<script>

document.getElementById('text').addEventListener('keyup', function(){

    var str = this.innerHTML;

    var mapObj = {

       quero:"<span class='color-one'>quero</span>",

       brasil:"<span class='color-two'>brasil</span>"

    };

    var re = new RegExp(Object.keys(mapObj).join("|"),"gi");

    str = str.replace(re, function(matched){

      return mapObj[matched.toLowerCase()];

    });

    document.getElementById('result').innerHTML = str;

}, false);

</script>





#text {

    border: 1px dashed #CCC;

    min-height: 30px;

}

.color-one {

    background-color: gray;

    color: white;

}

.color-two {

    background-color: salmon;

    color: white;

}

Boa noite.
Segue sugestão:



<!doctype html>

<html>

<head>

<style>

#text {border: 1px dashed #CCC;min-height: 30px;}

.color-one {background-color: gray;color: black;}

</style>

</head>

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

<body>

<script>

var co='color-one';

document.getElementById('text').addEventListener('keyup', function(){

var cl=this.classList, str=this.innerHTML;

	if((/quero/i).test(str)) {

	cl.add(co);

	}else{

		if((/co/).test(cl.value)){cl.remove(co);}

	}

});

</script>

</body>

</html>

______________________________________________________________________

Importante:

lynx --dump https://www.vivaolinux.com.br/termos-de-uso/ | sed -nr '/^[ ]+Se/,/dou.$/p'

______________________________________________________________________

Nota de esclarecimento:

O comando: ACIMA, faz parte da minha assinatura.

Att.: Marcelo Oliver

______________________________________________________________________

1 0

Quote

3. Re: digitar palavra "quero" e alterar cor automaticamente em javascript

eros18123
(usa Outra)

Enviado em 13/01/2024 - 11:40h

msoliver escreveu:



<div id="text" contenteditable="true">{{edit:Frente}}</div> 

<p id="result"></p>



<script>

document.getElementById('text').addEventListener('keyup', function(){

    var str = this.innerHTML;

    var mapObj = {

       quero:"<span class='color-one'>quero</span>",

       brasil:"<span class='color-two'>brasil</span>"

    };

    var re = new RegExp(Object.keys(mapObj).join("|"),"gi");

    str = str.replace(re, function(matched){

      return mapObj[matched.toLowerCase()];

    });

    document.getElementById('result').innerHTML = str;

}, false);

</script>





#text {

    border: 1px dashed #CCC;

    min-height: 30px;

}

.color-one {

    background-color: gray;

    color: white;

}

.color-two {

    background-color: salmon;

    color: white;

}

Boa noite.
Segue sugestão:



<!doctype html>

<html>

<head>

<style>

#text {border: 1px dashed #CCC;min-height: 30px;}

.color-one {background-color: gray;color: black;}

</style>

</head>

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

<body>

<script>

var co='color-one';

document.getElementById('text').addEventListener('keyup', function(){

var cl=this.classList, str=this.innerHTML;

	if((/quero/i).test(str)) {

	cl.add(co);

	}else{

		if((/co/).test(cl.value)){cl.remove(co);}

	}

});

</script>

</body>

</html>

______________________________________________________________________

Importante:

lynx --dump https://www.vivaolinux.com.br/termos-de-uso/ | sed -nr '/^[ ]+Se/,/dou.$/p'

______________________________________________________________________

Nota de esclarecimento:

O comando: ACIMA, faz parte da minha assinatura.

Att.: Marcelo Oliver

______________________________________________________________________

Ola Marcelo, obrigado pela ajuda, mas nao deu muito certo
Da forma que vc pos sempre que digito "quero" muda todas as letras de todas as palavras e eu gostaria que somente quando eu digitasse a palavra "quero" em qualquer posiçao do texto essa palavra mudasse de cor

0 0

Quote

4. Re: digitar palavra

tipoff
(usa Outra)

Enviado em 13/01/2024 - 12:44h

Fiz um código novo. Altere conforme a sua necessidade:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>

      body {

        background: #eee;

      }



      form {

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        height: 100vh;

      }



      input {

        width: 300px;

        height: 30px;

        border: 1px solid #ccc;

        border-radius: 5px;

        padding: 5px;

        font-size: 16px;

      }



      input:focus {

        outline: none;

      }



      input::placeholder {

        padding: 5px;

        color: #ccc;

      }

    </style>

  </head>

  <body>

    <form>

      <input type="text" id="texto" placeholder="Digite..." />

    </form>

  </body>

  <script>

    const element = document.querySelector("#texto");

    element.addEventListener("input", (e) => {

      const { target } = e;

      const value = target.value.toLowerCase();



      if (value === "quero") {

        target.style.color = "white";

        target.style.background = "gray";

        target.style.fontWeight = "bold";

      } else if (value === "quero brasil") {

        target.style.color = "white";

        target.style.background = "salmon";

        target.style.fontWeight = "bold";

      } else {

        target.style.color = "black";

        target.style.background = "white";

        target.style.fontWeight = "normal";

      }

    });

  </script>

</html>

1 0

Quote

5. Re: digitar palavra "quero" e alterar cor automaticamente em javascript

eros18123
(usa Outra)

Enviado em 13/01/2024 - 14:14h

tipoff escreveu:

Fiz um código novo. Altere conforme a sua necessidade:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>

      body {

        background: #eee;

      }



      form {

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        height: 100vh;

      }



      input {

        width: 300px;

        height: 30px;

        border: 1px solid #ccc;

        border-radius: 5px;

        padding: 5px;

        font-size: 16px;

      }



      input:focus {

        outline: none;

      }



      input::placeholder {

        padding: 5px;

        color: #ccc;

      }

    </style>

  </head>

  <body>

    <form>

      <input type="text" id="texto" placeholder="Digite..." />

    </form>

  </body>

  <script>

    const element = document.querySelector("#texto");

    element.addEventListener("input", (e) => {

      const { target } = e;

      const value = target.value.toLowerCase();



      if (value === "quero") {

        target.style.color = "white";

        target.style.background = "gray";

        target.style.fontWeight = "bold";

      } else if (value === "quero brasil") {

        target.style.color = "white";

        target.style.background = "salmon";

        target.style.fontWeight = "bold";

      } else {

        target.style.color = "black";

        target.style.background = "white";

        target.style.fontWeight = "normal";

      }

    });

  </script>

</html>

Boa tarde tipoff, obrigado pela ajuda, mas infelizmente nao deu certo, no caso nao pode ser usando input, pq criaria uma outra caixa, tem que ser no div
o programa que eu uso é o anki, da pra por codigos html, css e js nele, entao estou testando la

o que eu quero é que quando eu digitar a palavra "quero" em qualquer lugar do texto, sempre que ela aparecer, somente ela fique de outra cor, da mesma forma a palavra "brasil"

ex: eu quero beber agua hj, mas tb quero ir a praia
os 2 queros que apareceram na frase ficaram em negrito

0 0

Quote

6. Re: digitar palavra "quero" e alterar cor automaticamente em javascript

SamL
(usa XUbuntu)

Enviado em 13/01/2024 - 14:33h

Véi, tu vai ter que usar um lexer nisso ai e sugiro que tire da cabeça a ideia de trocar a cor assim que digitar, porque realmente não dá pra adivinhar assim em "runtime".
Deixa eu clarear mais:
--supondo que seja uma div específica.
--dai tu vai deixando o user (tu mesmo) digitar e vai executando um lexer em cima do texto que já está inserido na div.
Ou melhor, vai "concatenando" os caracteres e só depois disso é que tu passa o lexer em cima do texto e só então faz o processamento e ajuste fino nos tokens.
Assim, quando um token for "quero" substitui por algo como <strong>quero</strong> e manda pra dentro do innerHTML da div todo o texto junto com a nova modificação.

NOTA:
--não use tal código com innerHTML em nenhuma página web sem um tratamento adequado! Sendo no anki que é offline tá de boa.

https://nerdki.blogspot.com/ acessa ai, blog dedicado Paranóia!

0 0

Quote

7. Re: digitar palavra "quero" e alterar cor automaticamente em javascript

eros18123
(usa Outra)

Enviado em 13/01/2024 - 14:59h

SamL escreveu:

Véi, tu vai ter que usar um lexer nisso ai e sugiro que tire da cabeça a ideia de trocar a cor assim que digitar, porque realmente não dá pra adivinhar assim em "runtime".
Deixa eu clarear mais:
--supondo que seja uma div específica.
--dai tu vai deixando o user (tu mesmo) digitar e vai executando um lexer em cima do texto que já está inserido na div.
Ou melhor, vai "concatenando" os caracteres e só depois disso é que tu passa o lexer em cima do texto e só então faz o processamento e ajuste fino nos tokens.
Assim, quando um token for "quero" substitui por algo como <strong>quero</strong> e manda pra dentro do innerHTML da div todo o texto junto com a nova modificação.

NOTA:
--não use tal código com innerHTML em nenhuma página web sem um tratamento adequado! Sendo no anki que é offline tá de boa.

https://nerdki.blogspot.com/ acessa ai, blog dedicado Paranóia!

Boa tarde Sam, infelizmente eu nao entendo quase nada de programaçao javascript, mas se nao for possivel tudo bem.

na verdade o que eu queria que apos digitar a palavra "quero" em qualquer lugar do texto, ela ficasse de outra cor e permanecesse nessa cor, ai se fosse digitar outras palavras voltasse a cor normal

no anki eu utilizo comandos tb, mas tenho que selecionar a palavra e dar o comando pra palavra mudar de cor e isso ajuda muito, mas se tivesse uma forma de mudar automaticamente assim que digita determinada palavra, iria agilizar demais o processo nos estudos de cartoes frente e verso

0 0

Quote

8. Re: digitar palavra "quero" e alterar cor automaticamente em javascript

eros18123
(usa Outra)

Enviado em 13/01/2024 - 15:04h

quando uso comandos funciona normal, vejam abaixo o codigo de comandos, mas se tiver como deixar automatico ficaria show

0 0

Quote

9. Re: digitar palavra "quero" e alterar cor automaticamente em javascript

SamL
(usa XUbuntu)

Enviado em 13/01/2024 - 15:05h

Perae, me enganei, um lexer é muito, regex dá certo sim, porém, tem de mudar a forma como é feito a troca, porque por exemplo: se for trocando o texto toda vez que digitar, vai ficar várias tags em cima, então, tem de armazenar a string a parte e só depois executar o regex pra substituir, sendo que a string não deve ser lida diretamente da div, mas sim armazenada a parte e ai sim feita a troca sempre que houver caractere novos ou excluídos do elemento em questão.

https://nerdki.blogspot.com/ acessa ai, blog dedicado Paranóia!

0 0

Quote

10. Re: digitar palavra

SamL
(usa XUbuntu)

Enviado em 13/01/2024 - 15:26h

eros18123 escreveu:

no anki eu utilizo comandos tb, mas tenho que selecionar a palavra e dar o comando pra palavra mudar de cor e isso ajuda muito, mas se tivesse uma forma de mudar automaticamente assim que digita determinada palavra, iria agilizar demais o processo nos estudos de cartoes frente e verso

O código ali que o pessoalfizeram pra ti tava indo no rumo certo, faltou só uns ajustes pra finalizar de vez.

No caso funciona assim:
--a cada vez que inserir OU remover texto do elemento html então vc deve ir armazenando o conteúdo numa variável a parte.
--supondo que coloque um setInterval para executar um callback, então, no callback vc pega a string do texto e usa o regex ali do exemplo do pessoal, e então insere dentro do innerHTML do elemento.
--observe que, sempre que houver novo texto inserido será preciso mudar a string do texto a parte (a que tá armazenando tudo).
Edit:
--com a string a parte dá pra ir inserindo nela e modificando o html com regex.

Não uso mais o Anki mas nem sabia que agora é feito em javascript.
Vou ver aqui depois só por curiosity.

https://nerdki.blogspot.com/ acessa ai, blog dedicado Paranóia!

0 0

Quote

11. Re: digitar palavra

eros18123
(usa Outra)

Enviado em 13/01/2024 - 16:14h

o anki é feito em python, mas da pra colocar os codigos js dentro dos templates e dos cards
infelizmente n sei mta coisa sobre regex, vou estudar sobre isso, obrigado

se quiser tenho esse grupo do anki no whats

grupo do anki
https://chat.whatsapp.com/HL4TNruJDtr9ISGUsE9ddu

0 0

Quote

12. Re: digitar palavra "quero" e alterar cor automaticamente em javascript

tipoff
(usa Outra)

Enviado em 13/01/2024 - 21:02h

@eros18123: não conheço esse tal de "anki", utilizo o vscode para trabalho e estudos.

Sobre o código, veja bem, consegui adaptar e usar a própria div editável para estilizar essas palavras chaves ("quero", "brasil") em realtime. Só tem um bug que é a posição do cursor no final do texto ao digitar qualquer coisa, ele acaba removendo espaços em brancos, mas basta digitar alguma coisa + espaço que o cursor destrava. De qualquer forma, teria que ajustar esse problema ainda.

Eu deixei essas palavras-chaves como "quero" e "brasil" de forma dinâmica. o que significa que você pode adicionar outras palavras chaves no css usando classes que começam com .word-PALAVRA-CHAVE. Assim o código já captura e aplica a estilização apropriada definida dentro de <style>.

Segue o código:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>

      body {

        background: #eee;

      }



      #container {

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        height: 100vh;

      }



      #result {

        width: 80%;

        height: 20px;

        border: 1px solid #ccc;

        padding: 10px;

        overflow: auto;

      }



      .word-quero {

        font-weight: bold;

      }



      .word-brasil {

        color: green;

        font-weight: bold;

      }

    </style>

  </head>

  <body>

    <div id="container">

      <div id="result" contenteditable></div>

    </div>

  </body>

  <script>

    const loadKeyWords = () => {

      const keyWords = [];



      for (const styleSheet of document.styleSheets) {

        for (const cssRule of styleSheet.cssRules) {

          if (cssRule.selectorText.includes(".word-")) {

            keyWords.push(cssRule.selectorText.split("-")[1]);

          }

        }

      }



      return keyWords;

    };



    const positionCursorInElement = (element) => {

      const range = document.createRange();

      const select = getSelection();



      range.selectNodeContents(element);

      range.collapse(false);



      select.removeAllRanges();

      select.addRange(range);



      element.focus();

    };



    const result = document.querySelector("#result");

    const keyWords = loadKeyWords();



    result.addEventListener("keyup", () => {

      const text = result.innerText;

      const regex = new RegExp(`\\s+(${keyWords.join("|")})\\s+`, "gi");



      const newText = text.replace(regex, ` <span class="word-$1">$1</span> `);



      result.innerHTML = newText;

      positionCursorInElement(result);

    });

  </script>

</html>