0

Osea quiero que los textos de mi array se resalten a un color(El rojo bajo), pero quiero que se resalten cuando el usuario de la pagina escriba tal palabra en un textArea. En pocas palabras que se resalten las syntaxis ya escritas en mi array.

var syntax = [
           alerta: #E73F3F,
           consola: #BEE73F,
           voz: #BEE73F
       ];
var palabras = {"alerta", "consola", "voz"};
var TextoArea = document.querySelector(".Syntax");
while(true){
       if(TextoArea.value == palabras[0,3]){
          var code = document.createElement("code");
          if(code.innerHTML == palabras[0]){code.style.color=syntax[0]};
          if(code.innerHTML == palabras[1]){code.style.color=syntax[1]};
          if(code.innerHTML == palabras[3]){code.style.color=syntax[3]};                
      }
    }

Alguien me puede ayudar?

A lo que me refiero con esto esque quiero que el JavaScript detecte en todo momento lo que vaya a escribir un usuario en el textArea, si el JavaScript detecta que si escribe una variable de mi array "palabras" haga que se cree un "elemento Code" y que lo cambie de color segun la palabra que haya escrito en el textArea y el Code se traslade al textArea.

2
  • Por favor, aclara tu problema específico o proporciona detalles adicionales para resaltar exactamente lo que necesitas. Tal como está escrito, es difícil saber exactamente qué estás preguntando.
    – Comunidad Bot
    Commented el 3 oct. 2021 a las 0:28
  • debes meter etiquetas html donde encuntres la pablara ingresandole una clase donde pones el color ----hola <span class="colorear">mundo</span> Commented el 4 oct. 2021 a las 20:37

1 respuesta 1

0

La consigna es fácil de entender, pero no es tan fácil de implementar. Un elemento textarea no puede mostrar texto con diferentes formatos, solo texto plano. Lo que se necesita es un div editable. Ejemplo:

<div contenteditable="true">El texto <span style="color:#ff0000">resaltado</span>.</div>

Notar el atributo contenteditable que hace que el div sea editable.

Tu trabajo sería el siguiente:

  • Definir el estilo principal del div.
  • Definir el estilo de las palabras resaltadas.
  • Con javascript: chequear el div palabra por palabra mientras el usuario escribe y en caso de encontrar una reemplazarla por el código resaltado (algo como <span class="resaltado">palabra</span> por ejemplo). Esto se puede hacer de varias maneras, quizás buscando palabras completas (espacio-palabra-espacio) o por expresiones regulares...pero eso ya es tema para otra pregunta.

Suerte.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.