digitar palavra "quero" e alterar cor automaticamente em javascript

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

eros
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;
}





  


2. Re: digitar palavra

Marcelo Oliver
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
______________________________________________________________________



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

eros
eros18123

(usa Outra)

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


msoliver escreveu:

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
______________________________________________________________________




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


4. Re: digitar palavra

Tipoff *tipoff
tipoff

(usa Nenhuma)

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>



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

eros
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





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

Samuel Leonardo
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!



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

eros
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






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

eros
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


<script>
$('[contenteditable=true]').keydown(function(e){

//fundo da letra rosa -> ctrl g
if(e.ctrlKey && e.keyCode == 71){
document.execCommand("HiliteColor", false, "#FF81D3");
}


//fundo da letra verde claro -> ctrl l
if(e.ctrlKey && e.keyCode == 76){
document.execCommand("HiliteColor", false, "#90EE90");
}

//cor da letra azul claro -> ctrl j
if(e.ctrlKey && e.keyCode == 74){
document.execCommand("foreColor", false, "#00A8FF");
}

//cor da letra preto -> ctrl k
if(e.ctrlKey && e.keyCode == 75){
document.execCommand("foreColor", false, "black");
}


//letra do tamanho 5 (menor) -> alt n
if(e.altKey && e.keyCode == 78){
e.preventDefault();
document.execCommand("fontSize", false, "5");
}

//letra do tamanho 7 (maior) -> alt m
if(e.altKey && e.keyCode == 77){
e.preventDefault();
document.execCommand("fontSize", false, "7");
}


});
</script>



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

Samuel Leonardo
SamL

(usa XUbuntu)

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


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!

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!



10. Re: digitar palavra

Samuel Leonardo
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!



11. Re: digitar palavra

eros
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


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

Tipoff *tipoff
tipoff

(usa Nenhuma)

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>




01 02 03



Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts