13Oct 2011 2 Comments */?>

Contar o Limitar la cantidad de palabras con jQuery

Categorías: JQuery, Tutoriales - Tags: ,

Se acuerdan que el otro día creamos un plugin para limitar las letras de un textarea? Y que pasa si lo que necesitamos en limitar la cantidad de palabras? Aunque en principio no parezca de utilidad hay ocasiones donde necesitaremos hacerlo o simplemente necesitaremos contar la cantidad de palabras de un textarea para mostrarlo en un mensaje.

Contar la cantidad de palabras de un textarea

1
2
3
4
$('#textarea_id').keyup(function(){
     var palabras = $(this).val().split(/\b[\s,\.\-:;]*/).lenght;
     $('#contador').text('Has escrito en total '+ palabras +' palabras');
});

Lo que hacemos en cada vez que se levanta una tecla(keyup) comprobamos el valor del textarea y lo dividimos(split) en palabras mediante la regla de regex que prácticamente se encarga de separar las palabras por espacios, guiones ,etc. Una vez que tenemos todas las palabras con lenght obtenemos la cantidad.
Por último modificamos el campo contador con la cantidad de palabras de nuestro textarea.

Limitar la cantidad de palabras de un textarea

Para esto vamos a crear una nueva función

1
2
3
4
5
function limitar_palabras(texto, limite){
var palabras = texto.split(/\b[\s,\.\-:;]*/,limite);
texto=palabras.join(" ");
return texto;
}

En esta función añadimos la variable limite al .split y luego unimos el resultado con espacios usando .join.

Por lo que el código todo junto quedaría de la siguiente forma:

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
    $('#textarea_id').keyup(function(){
        $(this).val(limitar_palabras($(this).val(),3));
    });
});
function limitar_palabras(texto, limite){
    var palabras = texto.split(/\b[\s,\.\-:;]*/,limite);
    texto=palabras.join(" ");
    return texto;
}

Facil y sencillo verdad? Porque no prueban a crear su propio plugin de jQuery con estos sencillos pasos? Saludos!!

 

Actualizado

Actualización

He cambiado el regex para que también detecte números como palabras . Ahora “-” esta “\-“.

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • Pingback: Bitacoras.com()

  • Guest

    Fantástico post!

    Muchas gracias, solución sencilla pero eficaz!

    Lo único malo es que esa expresión regular me da problemas con las palabras acentuadas…

    Por ejemplo este texto:
    “Bienvenido a WordPress. Esta es tu primera entrada. Edítala o bórrala, ¡y comienza a publicar!.”

    Me lo deja así:
    “Bienvenido a WordPress Esta es tu primera entrada Ed í tala o b ó rrala ¡ y comienza a publicar !.”

    ¿podrías arreglarlo?de expresiones regulares ando un poco pez jeje

    Saludos!