Contar cantidad de oraciones y parrafos en textarea

rodrypaladin · #31 (**permalink**) 31/10/2014, 08:31

Si @IsaBelM, aparte de los eventos que tengo anteriores he añadido esos. Por otro lado si como dice @Hackmanc es mucho más complejo, tal vez tendría que reconsiderar en contar las filas, ya que el número de filas cambiará dependiendo donde pegue el texto, en mi contador serán X filas y en el Word serán Y filas, por lo que no creo que sea relevante.

IsaBelM · #32 (**permalink**) 31/10/2014, 08:59

pero que va a ser complejo hacerlo!!

en un archivo aparte ejecuta este código

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8">
<title></title>
<script type="text/javascript">
function copypasteRaton() {

setTimeout(mostrarFilas, 0);
}

function mostrarFilas() {
var texto = document.getElementById("area").value;
var lines = document.getElementById("lineas");

if (texto.match(/(\r\n|\n|\r)[a-z0-9¿!\-\*]+/gi) == null) { lines.innerHTML = 1; return; }

lines.innerHTML = texto.match(/(\r\n|\n|\r)[a-z0-9¿!\-\*]+/gi).length+1;
}
</script>
</head>
<body>
<textarea id="area" rows="20" onkeyup="mostrarFilas()" onpaste="copypasteRaton()"></textarea>
<div id="lineas"></div>
</body>
</html>

y pega con el ratón estos párrafos

Cita:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

obtienes 6 filas??

HackmanC · #33 (**permalink**) 31/10/2014, 09:37

Hola,

Cita:

Iniciado por IsaBelM

...
obtienes 6 filas??

Exactamente hay 6 parrafos saparados por dos retornos de carro. Podria apostar que Rodrypaladin pensaba en lineas, y en mi tablet veo 24, y en un teléfono habrán como 36, dependiendo de la orientación del mismo habrán más o menos.

Saludos,

IsaBelM · #34 (**permalink**) 03/11/2014, 16:24

releyendo el principio del tema, parece que es eso lo que quiere. no es complicado

todo se trata de conjugar css (line-heght), javascript (scrollHeight y getComputedStyle)

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
textarea#area {
    width: 200px;
    height: 150px;
    line-height: 15px;
    font-size: 13px;
}


textarea#area2 {
    width: 200px;
    height: 15px;
    line-height: 15px;
    font-size: 13px;
    overflow: hidden;
    visibility: hidden;
    position: absolute;
}
</style>
<script type="text/javascript">
function copypasteRaton() {

setTimeout(mostrarFilas, 0);
}


function mostrarFilas() {

    var texto = document.getElementById("area");
    var texto2 = document.getElementById("area2");
    texto2.innerHTML = texto.value.replace(/(\n+)/g, '\n');

    if (Math.floor(texto.scrollHeight / parseInt(window.getComputedStyle(texto, null)['line-height'])) >= 11) {

        texto2.style.height = window.getComputedStyle(texto, null)['height'];
        texto2.style.overflow = 'auto';
    }

    console.log(Math.floor(texto2.scrollHeight / parseInt(window.getComputedStyle(texto2, null)['line-height'])));

}
</script>
</head>
<body>

<textarea id="area2"></textarea>
<textarea id="area" onpaste="copypasteRaton()"></textarea>

</body>
</html>

HackmanC · #35 (**permalink**) 03/11/2014, 21:14

Hola,

A mi me parece una solución viable, por lo menos para el problema inicial que había solicitado rodrypaladin, es mas simple que la solución que yo había propuesto. Yo propuse hacerlo con la etiqueta <p>, para averiguar donde insertar el salto de línea, puesto que como indicó rodrypaladin anteriormente no hay saltos de línea. Pero eso nos lleva al siguiente problema.

En ese caso, en ese <textarea> ocupa cierta cantidad de líneas, si después ese mismo texto se pasa a otro textarea mas grande en otra página o se copia a un procesador de palabras u otro lugar, se va a ver desorganizado. El ejemplo lo mostré en el pie de página de mi mensaje anterior.

Yo creo que es una buena propuesta, pero estoy casi seguro que era lo que rodrypaladin quería, no lo que necesitaba. Lo que necesitaba era no hacerlo, el quería hacerlo porque posiblemente pensaba que los saltos de línea sí existían de alguna forma o le iban a servir para mostrar el texto en otro programa.

Cita:

Iniciado por HackmanC

... El algoritmo para calcular eso es realmente complejo basado en la métrica de la fuente que se está usando. ...

Cita:

Iniciado por IsaBelM

... no es complicado ...

Posiblemente hubo una confusión al respecto, y solamente como una aclaración sobre ese punto, el proceso para calcular las líneas no es complicado, la propuesta que yo mostré no podía ser mas simple, posiblemente tan simple como la tuya.

Pero, acá viene el mismo problema que mencioné antes, el algoritmo que usa el navegador es realmente complejo, usa un tipo de letra, que posiblemente no sea el mismo que usa el navegador, y posiblemente ni el navegador se encargue de ese procedimiento, como posiblemente hará Internet Explorer, que supongo delega el desplegado de los controles al sistema operativo Windows, mismo de Microsoft.

Internamente el cálculo de las líneas es complejo, se basa en la métrica de la fuente, su ascendente, su descendente, así como su separación de las letras no es la misma en todos los casos y se basan en ciertas medidas denominadas kerning.

A eso posiblemente haya que agregarle un par de métricas adicionales, como el caso de ClearType de Microsoft, solo sí está activado. Y eso solo en Windows, o solo con un navegador, en Linux seguramente habrá un componente que asemeje la funcionalidad de ClearType y las fuentes no serán las mismas de Windows.

Por último el tipo de letra que yo tengo instalado, incluyendo el simple Arial o Verdana, puede que no sea la misma versión que otra persona tenga instalada, donde haya pequeños cambios en el kerning o la métrica.

Así que aunque yo cuente 20 líneas, cuando lo pase a Word, posiblemente no van a ser 20 líneas en el mismo espacio, y por eso mencioné que no era adecuado que insertara la cantidad de líneas, ni los saltos de línea, simplemente que las dejara como estaban, sin contar y sin saltos de línea.

Aunque como ejercicio de programación, o resolver un problema que no es común, me pareció interesante, y no quitaba mucho tiempo,

Saludos,

freddi355 · #36 (**permalink**) 31/05/2015, 03:59

Cita:

Iniciado por IsaBelM

ok, sin problema

Gracias Isabel una consulta y como llevo el resultado de las lineas a un input type="number" le coloco id al etiqueta y no muestra resultado.