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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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