2

el problema al cual me enfrento es que pude lograr lo que necesito pero mostrándolo en consola, pero mi objetivo es que tal cual como aparece en consola a cada palabra se le asigne un span, hay algún código en jquery que lo haga posible, muchas gracias de antemano.

este es el desafio que quiero lograr... https://www.youtube.com/watch?v=vViQPTNHjQE ... se trata de pegar un texto y luego al darle click a una palabra esta me de varias opciones entre ella traducirla, quiero hacer algo parecido a lo que muestra el video, no se si eso sea posible hacerlo con Jquery o necesitare de otro lenguaje de programación, estoy atorada en esa parte, gracias.

$("#span").click(function() {
  alert("es posible meter cada palabra en <span>?");
  var textArea = $('#words');
  var arrayOfWords = textArea.val().split(" ");
  $.each(arrayOfWords, function(i, word){
    console.log(word) // es en esta parte donde no se que codigo usar para meter cada palabra en <span> despues de darle click 
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" name="" value="meter cada palabra que pegue en el Textarea en <span>" id="span"> <br><br>

<textarea id="words"   autocomplete="off" spellcheck="false" autocapitalize="off" autocorrect="off" ></textarea>

7
  • por que no le concatenas una , al console.log?
    – Sr1871
    el 7 nov. 2017 a las 16:59
  • y donde quieres mostrar esas palabras ? el 7 nov. 2017 a las 16:59
  • Osea la idea es que quede internamente en <span> ya que posteriormente necesito usar cada palabra individualmente, mejor dicho lo que quiero hacer es como una especie de diccionario.... al darle click a una palabra que el usuario pegue en el TEXTAREA esta palabra se conecte con google y busque su traducción, no se si esta es la forma correcta de hacerlo? el 7 nov. 2017 a las 17:02
  • Mejor saltarte el ponerlos en un span, una vez que tienes el arreglo consulta google para la traducción de cada palabra, cual es la o las funciones que google da para traducir palabras?
    – Yikarus
    el 7 nov. 2017 a las 17:09
  • Pensaba terminar este paso para enfocarme en como conectar mi pagina con google translator pero tu me dices que no necesito spans para cada palabra?..... ok voy a hacer un par de búsquedas pero si puedes darme alguna sugerencia o algo te lo agradeciera mucho, muchas gracias por tu comentario el 7 nov. 2017 a las 17:17

3 respuestas 3

1

window.addEventListener("DOMContentLoaded", ()=>{
const span = document.getElementById("meteme"),
      textarea = document.getElementById("meto"),
      pattern = /\s/gi;
      var words = [], lastIndex = 0;
      
      textarea.addEventListener("keyup", e =>{
      span.innerHTML = textarea.value;
      if(pattern.test(textarea.value)){ words.push(textarea.value.substr(0,textarea.value.length-1));
      textarea.value = "";
      words.forEach( e => {console.log(`El significado de ${e} es: ....`)});
      }
      });
});
<span style="display:block" id="meteme"></span>

<textarea style="margin-top: 20%" cols="40" rows="10" id="meto"></textarea>

1
  • Muchas gracias eduardo, voy a probar tu solución y te digo , mi meta es lograr algo parecido a esto youtube.com/watch?v=vViQPTNHjQE, en donde se le de click a una palabra y esta te muestre opciones entre ellas la traducción, y no se si sea posible con jquery el 8 nov. 2017 a las 19:27
0

Puedes usar el evento keyup de la siguiente forma:

Jquery:

$(document).on('keyup', 'textarea', function(){ 
    var words = $(this).val();

    $('span').text(words);
});

Aqui esta el ejemplo

Nota: para este código, es necesario incluir Jquery

Saludos!!

2
  • Muchas gracias Radames, voy a probarlo y te cuento el 8 nov. 2017 a las 19:42
  • Claro que si @PrincessKawaii pruébalo y espero y puedas solucionarlo el 8 nov. 2017 a las 22:37
-1

De esta forma asignas el texto del "Textarea" al "#span" o a cualquier otro elemento, solo haciendo referencia al id

$("#span").click(function() {
  alert("es posible meter cada palabra en <span>?");
  var textArea = $('#words');
  var arrayOfWords = textArea.val().split(" ");
  $.each(arrayOfWords, function(i, word){
    console.log(word) // es en esta parte donde no se que codigo usar para meter cada palabra en <span> despues de darle click 
  $("#span").val(textArea.val()); // Línea adicional
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" name="" value="meter cada palabra que pegue en el Textarea en <span>" id="span"> <br><br>

<textarea id="words"   autocomplete="off" spellcheck="false" autocapitalize="off" autocorrect="off" ></textarea>

1
  • 2
    Hola Ángel, se agradecen tus contribuciones, solo recuerda que al realizar respuestas es importante agregues una explicación para que tu respuesta sea bien recibida. revisa Cómo responder.
    – Jorgesys
    el 7 nov. 2017 a las 23:47

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.