digitar palavra
12/01/2024
0
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 abaixo.
<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;
}
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 abaixo.
<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;
}
Eros Cardoso
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)
