6

Tengo una lista con etiquetas p dentro. Quiero conseguir el tamaño de cada texto y luego recortarlo. Tengo esto:

<script>
    var text;
    for(var i=0;i<document.getElementsByTagName("p").length;i++){
      console.log(document.getElementsByTagName("p")[i].length+ "");
      if(text[i].length > 12) {
          text[i] = text[i].substring(0,10)+"...";
      }
    }
</script>

El problema es que me da undefined. También tenía otra duda. ¿Dónde debería colocar este trozo de código, dentro del head o al final del body? ¿Sería mejor hacerlo con jQuery?

3
  • el problema es que la variable text no la estás inicializando .. quieres un: var text = document.getElementsByTagName("p")?
    – lois6b
    el 19 ene. 2017 a las 9:11
  • @lois6b Lo que quiero es que la variable text almacene el tamaño de cada texto
    – largoWinch
    el 19 ene. 2017 a las 9:14
  • Entonces text no es un nombre muy correcto. Pero la cosa es que la funcion getElementsByTagName("p") devuelve un array con los elementos cuya etiqueta sea esa. pero tienes que seleccionar qué quieres... el texto dentro de <p> se obtiene con innerHTML
    – lois6b
    el 19 ene. 2017 a las 9:16

2 respuestas 2

5

Para que la variable texto almacene el tamaño, has crear una variable (elementos por ejemplo) que recoja el array que devuelve la funcion getElementsByTagName("p")

Despues inicializas textos como un array con numero de elementos igual al numero de elementos obtenidos.

Despues iteras como hacías, pero no puedes hacer un .lenght directamente sino que tienes que acceder a la propiedad innerHTML que recoge el texto entre las etiquetas <p> y </p>

Dentro del if donde compruebas si es >12 has de poner el elementos[i].innerHTML en la parte izq de la asignación para cambiar su contenido. (aunque no entiendo por qué la comprobación pones 12 y en el substring pones 10)

<script>
    var elementos= document.getElementsByTagName("p");
    var textos =  new Array (elementos.length);
    for(var i=0;i<elementos.length;i++){
        console.log(elementos[i].innerHTML.length+ "");
        textos[i] = elementos[i].innerHTML.length;
        if(elementos[i].innerHTML.length > 12) {
            elementos[i].innerHTML = elementos[i].innerHTML.substring(0,10)+"...";
        }
     }
</script>

    var elementos= document.getElementsByTagName("p");
    var textos =  new Array (elementos.length);
    for(var i=0;i<elementos.length;i++){
      console.log(elementos[i].innerHTML.length+ "");
      textos[i] = elementos[i].innerHTML.length;
      if(elementos[i].innerHTML.length > 12) {
          elementos[i].innerHTML = elementos[i].innerHTML.substring(0,10)+"...";
      }

    }
<p>Probando la funcion javascript</p>
<p>Probando la funcion javascript con distintas longitudes</p>
<p>Probando javascript</p>
<p>Probando la funcion</p>
<p>Probando la funcion javascript otra vez</p>

Respecto a donde ponerlo, puedes meter esto en una funcion que se llame en el evento onLoad

2

Basándome en tu ejemplo:

var text;
console.log(document.getElementsByTagName("p").length + ' Elmentos P ');

for (var i = 0; i < document.getElementsByTagName("p").length ; i++) {
  console.log(i+1);
  console.log(document.getElementsByTagName("p")[i]);
  console.log(document.getElementsByTagName("p")[i].textContent.length);
  document.getElementsByTagName("p")[i].textContent = document.getElementsByTagName("p")[i].textContent.substring(0,12) + "...";
}
<p>1 Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo
</p>
<p>2 Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo
</p>
<p>3 Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo
</p>
<p>
4 Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo
</p>
<p>
5  Parrafo ejemplo Parrafo ejemplo Parrafo
</p>
<p>
6 Parrafo ejemplo Parrafo ejemplo
</p>
<p>7 0123456789</p>

Sobre jQuery claro que seria mas fácil si lo utilizaras.

Ejemplo con jquery:

$(document).ready(function(){
  //Llamo la fución each de jquery y le mando como parametro todos los objetos P $("p")
  $.each($("p"),function(indice, valor){
    //console.log(indice);    
    //console.log(valor);
    //This es el objeto actual, el P del ciclo que corresponda
    //la propiedad .text modifica el texto del P, obtiene y modifica
    $(this).text($(this).text().substring(0,12) + "...");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>1 Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo
</p>
<p>2 Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo
</p>
<p>3 Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo
</p>
<p>
4 Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo
</p>
<p>
5  Parrafo ejemplo Parrafo ejemplo Parrafo
</p>
<p>
6 Parrafo ejemplo Parrafo ejemplo
</p>
<p>7 0123456789</p>

4
  • 2
    Si das el visto bueno, es aconsejable dar un punto positivo también @AdrianRodriguez aunque no es obligatorio es una forma de dar puntos positivos a quienes responden las preguntas, y esto mejora la experiencia de usuario en el sitio de SOes. el 19 ene. 2017 a las 10:10
  • 1
    @MarcLemien el OP no recibirá tu notificación, pues no publicó ninguna comentario en esta publicación :/
    – fedorqui
    el 19 ene. 2017 a las 10:15
  • 2
    No importa, a quien lo lea es una buena practica que muchos no hacen, quien lo lea le servirá. el 19 ene. 2017 a las 10:16
  • 1
    @MarcLemien por si acaso, How do comment @replies work?, pues esta respuesta tuya la vi por casualidad.
    – fedorqui
    el 19 ene. 2017 a las 10:52

Tu Respuesta

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

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