2

Lo que quieor hacer es lo siguiente , el usuario colocara una oracion quiero un salto de linea cada 3 palabras peor no se como lograrlo e intentado con split pero si me pueden ayudar seria grandioso

 let tex = document.getElementById('tex_input').value
    word.innerHTML = help //cada 3 palabras un salto de linea
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <div>
    <p id="word">Blanca por dentro<br>
        verde por fuera <br>
        Si no sabes,<br>
        espera.</p>
 </div>
<div id="div_mostrar_two" style="display: none">
    <textarea name="comentarios" placeholder="Adivinanza" id="help_input" class="input_general_texarea" rows="2" cols="40"></textarea>
</div>

</body>
</html>

1 respuesta 1

4

Resumen

El programa recibe un texto y lo divide en palabras, para formar una nueva cadena de texto con saltos de línea cada 3 palabras.

Explicación

  • Declaro una variable palabras que almacena el array de strings que devuelve el método split().
  • Declaro una variable contador que almacena el contador de palabras
  • Reinicio el parametro texto para generar el texto nuevo.
  • Recorro el array de strings palabras.
  • Agrego a la variable texto la palabra actual del array palabras y un espacio.
  • Incremento el contador de palabras.
  • Si el contador es igual a 3, agrego un salto de línea y reinicio el contador a 0.
  • Retorno el texto.

Solución

const texto = document.getElementById('word');

function saltoDeLinea(texto) {
    let palabras = texto.split(' ');
    let contador = 0;
    texto = '';
    for (let i = 0; i < palabras.length; i++) {
        texto += palabras[i] + ' ';
        contador++;
        if (contador === 3) {
            texto += '<br>';
            contador = 0;
        }
    } 
    return texto;
}

texto.innerHTML = saltoDeLinea(texto.innerHTML);
2
  • 1
    Trata de agregar una explicación relevante de la solución propuesta. Recuerda que no se responden preguntas solo para usuarios avanzados.
    – DjCrazy
    Commented el 5 abr. 2022 a las 0:43
  • Listo, muchas gracias por la aclaración.
    – Azt3kCode
    Commented el 5 abr. 2022 a las 1:07

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.