digitar palavra "quero" e alterar cor automaticamente em javascript

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

eros
eros18123

(usa Outra)

Enviado em 13/01/2024 - 23:45h


tipoff escreveu:

@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>




Boa noite tipoff, testei seu codigo e infelizmente nao aconteceu nada, nao funcionou


  


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

Samuel Leonardo
SamL

(usa XUbuntu)

Enviado em 14/01/2024 - 05:34h

Cara, eu baixei o Anki mais recente pra tentar te ajudar e p.q.p que software horrível!
Ele não é nada fácil de usar, parece que foi feito apenas pro carinha que programou ele e só ele que sabe usar.
Não é nem um pouco intuitivo e pra usar as coisas lá (instalar um javascript) é tudo "feito a mão" e fora do programa, além de ser super difícil achar um tutorial simples no google de como fazer isso, pois os que vi já são pra gente bem "conhecida" do programa.

Depois o pessoal diz que sou exagerado e injusto em afirmar que software livre tem baixa qualidade, principalmente de usabilidade. Mas é isso, infelizmente no mundo da GPL e OS tem que se contentar com as migalhas e favor que os outros fazem. rsrsrs


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



15. Re: digitar palavra

Tipoff *tipoff
tipoff

(usa Nenhuma)

Enviado em 14/01/2024 - 10:12h

Caras, tentei achar esse tal de anki no repositório (uso fedora) via dnf e flatpak para tentar ajudar, única coisa que achei foi um software de anotações: https://apps.ankiweb.net/

Falando nisso, pra quê usar um software tão desconhecido? Não é melhor usar um editor ou uma IDE mais conhecida e suportada?

@eros18123: como você está executando os códigos? Esse anki tem um browser embutido?

Se eu salvar o código que postei como index.html e abrir no meu browser (tanto brave quanto firefox), ele roda de acordo com o que falei no último post...


16. Re: digitar palavra

Tipoff *tipoff
tipoff

(usa Nenhuma)

Enviado em 14/01/2024 - 10:21h

@SamL: de fato tem muito SL ruim. Mas tipo, ao invés de usar estes que são ruins, pq não usar os bons? Tipo neovim, que se bem configurado funciona perfeitamente. Outro que eu gosto bastante é o Geany, usava muito ele quando tinha um hardware meia boca, me serviu bem para programar nas altas horas da madruga rsrs!

Esse anki pra mim é uma novidade, nunca ouvi falar. E pelo visto, esse é um dos motivos dele não ser bom: quase ninguém conhece e usa rs!



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

eros
eros18123

(usa Outra)

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


Boa tarde tipoff, o anki é um software de memorizaçao para estudos, como idiomas e concursos, dificilmente é usado para programaçao (como é o meu caso) e é super completo. A medida que vc vai colocando addons (complementos nele sao feitos com a linguagem python), eu nunca conheci um software tao fantastico e completo como ele, é literalmente tudo em 1, mas tem que acostumar a usar ele, no principio parece chato msm e sem graça.

No meu caso nao tem sentido usar um editor IDE separado so pra fazer isso, ja que no Anki tem um editor embutido e é nele que eu quero que as coisas funcionem, nao fora dele

Eu estou usando o anki para estudos (nao pra aprender a programar) / é um software de revisao (mas da pra colocar codigos html, css e js dentro dele), ele usa um sistema de repetiçao espaçada e memorizaçao, entao eu faço um cartao com frente e verso, ai se eu marcar errado, de acordo com os algoritmos, o mesmo cartao volta mais rapido e se marcar certo ele demora mais pra voltar, enfim nao é esse o caso aqui, vamos falar onde eu coloco a programaçao.

Primeiro, precisa criar um cartao, depois clica em cartoes, como mostra na imagem, ai la sera a area onde coloca os codigos html e js, em cima tem a opçao de estilos onde fica o css
Ele tem um browser embutido nessa area
Pra usar ele nao precisa do app(celular) ou programa no pc, da pra usar pela internet tb atraves do site do anki, vc so precisa ter uma conta e cards la (baixados na net ou feitos por vc msm)
https://ankiweb.net/decks



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


18. Re: digitar palavra

eros
eros18123

(usa Outra)

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

essa é a area onde se programa o js, html e css e é dentro do programa mesmo, (a menos que vc queira fazer complementos (adons sao feitos fora do programa e usando python, mas nao é esse o caso aqui)

os codigos ficam dentro do programa e qualquer pessoa que tem os cards podem edita-los



19. Re: digitar palavra

Tipoff *tipoff
tipoff

(usa Nenhuma)

Enviado em 14/01/2024 - 18:45h

Ah, entendi. Cheguei nessa parte a onde coloca o código html/js/css. Salvei o código e abri o cartão, e funcionou... vide print abaixo.

Detalhe: só tive que colocar esse {{edit:Frente}} dentro da div "result":
<div id="result" contenteditable>{{edit:Frente}}</div> 




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

eros
eros18123

(usa Outra)

Enviado em 14/01/2024 - 19:26h


tipoff escreveu:

Ah, entendi. Cheguei nessa parte a onde coloca o código html/js/css. Salvei o código e abri o cartão, e funcionou... vide print abaixo.

Detalhe: só tive que colocar esse {{edit:Frente}} dentro da div "result":
<div id="result" contenteditable>{{edit:Frente}}</div> 




estranho, no meu nao acontece nada quando faço isso, acho melhor deixar pra la, mas obrigado ai de qualquer forma


21. Re: digitar palavra

Tipoff *tipoff
tipoff

(usa Nenhuma)

Enviado em 14/01/2024 - 19:37h

@eros18123: tente criar um cartão novo, a princípio só segui os passos que você colocou no post. Aliás, dentro do editor de códigos, ali não funcionou mesmo. Só funciona quando salva e abre o cartão para visualizar...

edit: estou usando a versão 23.12.1 do anki...


22. Re: digitar palavra

eros
eros18123

(usa Outra)

Enviado em 14/01/2024 - 19:52h

olha como o fica apos por o codigo
tb estou usando essa versao


23. Re: digitar palavra

Tipoff *tipoff
tipoff

(usa Nenhuma)

Enviado em 14/01/2024 - 19:57h

Eu fiz um pouco diferente, não usei essa aba estilo... coloquei o código todo nessa aba "Modelo de Frente"...



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

eros
eros18123

(usa Outra)

Enviado em 14/01/2024 - 20:02h


tipoff escreveu:

Eu fiz um pouco diferente, não usei essa aba estilo... coloquei o código todo nessa aba "Modelo de Frente"...



tipoff entao era isso, agora funcionou, obrigado



01 02 03



Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts