COMO CONTAR LAS PALABRAS DE UN TEXTO.
Contar las palabras de un texto resulta fácil, pero tal vez te resulte un poco mas difícil cuando se trata de un texto largo que contar.
He estado buscando y e tenido la idea al buscar por Internet de hacer un post con un código el cual pueda contar contar las palabras de un texto.
Esta entrada ayudare a personas tanto tengan paginas web y busque este código como a las que no!! y solo intenten buscar como contar las palabras de su trabajo en el pc.
EMPECEMOS:
1º Para el que busca solo donde contar las palabras de su texto, te digo que esta en la parte superior de esta entrada pega el código y da clic en CARACTERES Y PALABRAS, automáticamente el texto sera contado.
2º Si lo que buscas es el código html para poder colocarlo en tu sitio web o blog, sigue estos pasos y no tendrás problema.
PASOS:
Paso 1: copia el siguiente código.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ejemplo contador de caracteres - CLH</title>
<link href="css/estilos.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/funciones.js"></script>
</head>
<body>
<div id="container">
<h1>Escribe tu mensaje</h1>
<form name="formulario" id="formulario" action="" method="post">
<label for="mensaje">Mensaje:</label>
<textarea name="mensaje" id="mensaje" rows="10" cols="50"></textarea>
<p><input type="submit" name="publicar" id="publicar" value="Publicar" />
</p>
</form>
<div id="contador">
</div>
</div>
</body>
</html>
Paso 2: Pega el codigo donde hayas elegido decir que, saldra una vez publicada la entrada esto código no saldrá en vista previa ni durante la creación de la entrada.
jQuery
Ahora con este código le daremos la acción de poder contar las palabras del texto.
$(function(){
/* Definimos variables que utilizaremos
valor: En ella almacenaremos cuantos caracteres hay en el
área de texto.
contador: Almacenará el número de caracteres restantes,
descontando el valor actual desde el máximo (150).
parrafo: Almacenará en que tipo de clase (estilo) se mostrará el
mensaje (verde si no se ha pasado el límite, rojo si se
sobrepasado).
*/
var valor, contador, parrafo;
// Mostramos un mensaje inicial y lo añadimos al div de id contador.
$('<p class="indicador">Tienes 150 caracteres restantes</p>').appendTo('#contador');
// Definimos el evento para que detecte cada vez que se presione una tecla.
$('#mensaje').keydown(function(){
// Redefinimos el valor de contador al máximo permitido (150).
contador = 150;
/* Quitamos el párrafo con clase advertencia o indicador, en caso de que ya se
haya mostrado un mensaje */
$('.advertencia').remove();
$('.indicador').remove();
// Tomamos el valor actual del contenido del área de texto
valor = $('#mensaje').val().length;
// Descontamos ese valor al máximo.
contador = contador - valor;
/* Dependiendo de cuantos caracteres quedan, mostraremos el mensaje de una
u otra forma (lo definiremos a continuación mediante CSS */
if(contador < 0) {
parrafo = '<p class="advertencia">';
}
else {
parrafo = '<p class="indicador">';
}
// Mostramos el mensaje con el número de caracteres restantes.
$('#contador').append(parrafo + 'Tienes ' + contador + ' caracteres restantes</p>');
});
});
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
h1 {
font-size: 20px;
}
label {
display: block;
}
#mensaje {
padding: 5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#publicar {
border: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #999999;
padding: 10px;
font-weight: bold;
color: white;
}
#publicar:hover {
background: #666666;
cursor: pointer;
}
.advertencia {
color: red;
}
.indicador {
color: green;
}
Con esto tendríamos nuestro contador de palabras listo!!.
Es muy fácil de hacer, siguiendo estos pasos nuestro contador estará listo para usarse.
Cave resaltar que si tienes dudas escribe un comentario para poder recibir ayuda, o bien si te a servido de ayuda puedes visitar la pagina de CODIGOS HTML donde podrás encontrar mas códigos que te sirvan de ayuda.
$(function(){
/* Definimos variables que utilizaremos
valor: En ella almacenaremos cuantos caracteres hay en el
área de texto.
contador: Almacenará el número de caracteres restantes,
descontando el valor actual desde el máximo (150).
parrafo: Almacenará en que tipo de clase (estilo) se mostrará el
mensaje (verde si no se ha pasado el límite, rojo si se
sobrepasado).
*/
var valor, contador, parrafo;
// Mostramos un mensaje inicial y lo añadimos al div de id contador.
$('<p class="indicador">Tienes 150 caracteres restantes</p>').appendTo('#contador');
// Definimos el evento para que detecte cada vez que se presione una tecla.
$('#mensaje').keydown(function(){
// Redefinimos el valor de contador al máximo permitido (150).
contador = 150;
/* Quitamos el párrafo con clase advertencia o indicador, en caso de que ya se
haya mostrado un mensaje */
$('.advertencia').remove();
$('.indicador').remove();
// Tomamos el valor actual del contenido del área de texto
valor = $('#mensaje').val().length;
// Descontamos ese valor al máximo.
contador = contador - valor;
/* Dependiendo de cuantos caracteres quedan, mostraremos el mensaje de una
u otra forma (lo definiremos a continuación mediante CSS */
if(contador < 0) {
parrafo = '<p class="advertencia">';
}
else {
parrafo = '<p class="indicador">';
}
// Mostramos el mensaje con el número de caracteres restantes.
$('#contador').append(parrafo + 'Tienes ' + contador + ' caracteres restantes</p>');
});
});
CSS
Si deseas darle un algo de estilo a tu contador de palabras solo tendrás que añadir este código CSS.
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
h1 {
font-size: 20px;
}
label {
display: block;
}
#mensaje {
padding: 5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#publicar {
border: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #999999;
padding: 10px;
font-weight: bold;
color: white;
}
#publicar:hover {
background: #666666;
cursor: pointer;
}
.advertencia {
color: red;
}
.indicador {
color: green;
}
Es muy fácil de hacer, siguiendo estos pasos nuestro contador estará listo para usarse.
Cave resaltar que si tienes dudas escribe un comentario para poder recibir ayuda, o bien si te a servido de ayuda puedes visitar la pagina de CODIGOS HTML donde podrás encontrar mas códigos que te sirvan de ayuda.
yeah!!!! gracias.
ResponderEliminar