0

Tengo este texto que a través de un innerhtml llamando al id de un div guardo en un array todo el texto para poder buscar la palabra mas larga que tiene y imprimirlo en un div especifico en este caso llamado "wordMax", pero soy incapaz de entender lo que tengo que hacer y como realizar el array para poder sacarlo. Dicho todo esto aquí va el código que llevo hasta el momento.

HTML:

<div id="layer2">
    <p>Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un
        sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos
        normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos
        textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas
        web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por
        resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones
        han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo
        insertándole humor y cosas por el estilo).</p>
</div>

<div id="wordMax"></div>

JavaScript:

function ejercicio2() {
    /* Recuperar la palabra de mayor longitud y mostrarla en la capa wordMax */
    /*
        PASO 1: Recuperar el contenido de la capa layer2
        PASO 2: A ese contenido realizar el split por el espacio en blanco
        PASO 3: Iterar sobre el array de palabras y para cada una de ellas obtener su longitud (método length)
        PASO 4: Actualizar la longitud si es mayor que la anterior guardada
    
    */

    debugger;
    var in1 = document.getElementById('layer2').innerHTML;

    let total = [];

    total.push(in1);
    console.log(total);

    var longest = total.reduce(
        function (a,b) {
            return a.length > b.length ? a: b;
        }
    );

    document.getElementById('wordMax').innerHTML= longest;

}

1 respuesta 1

0

Casi lo tenias, solo un par de detalles te impedian hacerlo bien. A saber:

  1. Cuando tu haces esto:
var in1 = document.getElementById('layer2').innerHTML;

esta recuperando el contenido del elemento <div id="layer2">, el cual contiene otro elemento, el <p>, que a su vez contiene el texto que necesitas. Por lo tanto debes bajar un nivel más en el árbol de elementos dentro de ese elemento para recoger solo ese texto, y lo puedes hacer mediante children() (enlace a su documentación en inglés), el cual devuelve un interfaz HTMLCollection (enlace a su documentación), que se puede recorrer como un array, con todos los elementos hijos que tiene, pero como tu sabes que solo es uno, puedes acceder señalándolo directamente por su número de índice de array, así: children[0].

  1. Después estás haciendo esto:
let total = [];
total.push(in1);

lo cual tan solo agrega un elemento al array total que contiene lo que hemos dicho antes. Aparte de bajar un nivel en el árbol para recuperar tan solo el contenido del elemento hijo <p> aquñi te olvidastes de aplicar el split() (enlace a su documentación que te estan pidiendo en el ejercicio, por lo tanto el resto no te funcionaba bien.

Mi propuesta para realizar todos estos pasos en uno es esta:

var total = document.getElementById('layer2').children[0].innerHTML.split(" ");

Y con eso ya lo tienes todo y no debes modificar nada más. Tan solo recuerda llamar a la función al terminar, sino no hace nada.

Dejo un fragmento que puedes ejecutar de ejemplo:

function ejercicio2() {
  var total = document.getElementById('layer2').children[0].innerHTML.split(" ");
  var longest = total.reduce(
    function(a, b) {
      return a.length > b.length ? a : b;
    }
  );
  document.getElementById('wordMax').innerHTML = longest;
}
ejercicio2()
<div id="layer2">
  <p>Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un
    sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos
    normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos
    textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas 
    web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por
    resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones
    han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo
    insertándole humor y cosas por el estilo). StackOverflow!</p>
</div>

<div id="wordMax"></div>

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.