¿Cómo obtener el número de líneas en un área de texto?

Lo que me gustaría es contar el número de líneas en un área de texto, por ejemplo:¿Cómo obtener el número de líneas en un área de texto?

line 1 
line 2 
line 3 
line 4

debería contar hasta 4 líneas. Básicamente presionando entrar una vez que lo trasladará a la siguiente línea

El siguiente código no funciona:

var text = $("#myTextArea").val(); 
var lines = text.split("\r"); 
var count = lines.length; 
console.log(count);

da siempre '1' no importa cuántas líneas.

Fuente

2010-01-10 Click Upvote

He implementado las líneas y métodos LineCount como prototipos de Cuerda:

String.prototype.lines = function() { return this.split(/\r*\n/); } 
String.prototype.lineCount = function() { return this.lines().length; }

Aparentemente, el método de división se no contar un retorno de carro y/o carácter de nueva línea al final de la cadena (o la propiedad de texto interno de un área de texto) en IE9, pero lo contará en Chrome 22, produciendo resultados diferentes.

Hasta ahora me han acomodado para esta restando 1 a partir del recuento de línea cuando el navegador es distinto de Internet Explorer:

String.prototype.lineCount = function() { return this.lines().length - navigator.userAgent.indexOf("MSIE") != -1); }

Esperemos que alguien tiene una mejor expresión regular u otra solución.

Fuente

2012-10-17 05:08:30 thor2k

Después de realizar más pruebas, descubrí que cualquier espacio en blanco después del último carácter de nueva línea y antes de la etiqueta de cierre también cuenta como un elemento adicional en la división, excepto en los navegadores IE9. – thor2k

esta publicación es un poco antigua, pero solo por información, creo que encontré una solución alternativa: el uso de un elemento 'contenteditable' en lugar de un área de texto: [http://stackoverflow.com/a/22732344/2037924](http : //stackoverflow.com/a/22732344/2037924) ... – webeno

Funciona cuando presiono enter, pero no funciona para que el texto largo aparezca en pocas líneas. – RaV

¿Qué hay de la división en "\ n" en su lugar?

También será un problema donde una línea se envuelve en 2 líneas en el área de texto.

Para hacerlo con precisión, puede usar una fuente de altura fija y medir píxeles. Esto podría ser problemático sin embargo.

Fuente

2010-01-10 02:54:49 alex

ouch ...................! – alex

No es tan malo ... Utilicé este método en mi respuesta. – Mottie

usuario \n en lugar de \r

var text = $("#myTextArea").val(); 
var lines = text.split("\n"); 
var count = lines.length; 
console.log(count);

Fuente

2010-01-10 02:56:44

Si usted apenas está esperando para probar retornos de línea dura, esto va a funcionar multiplataforma:

var text = $("#myTextArea").val(); 
var lines = text.split(/\r|\r\n|\n/); 
var count = lines.length; 
console.log(count); // Outputs 4

Fuente

2010-01-10 02:58:15

El carácter normal de nueva línea es "\ n". La convención en algunos sistemas es también tener "\ r" de antemano, por lo que en estos sistemas "\ r \ n" se encuentra a menudo para significar una nueva línea. En un navegador, a menos que el usuario ingrese intencionalmente una "\ r" copiándola de otra parte, la nueva línea probablemente se exprese como "\ n". En cualquier caso, la división por "\ n" contará el número de líneas.

Fuente

2010-01-10 02:58:43

El problema con el uso de "\ n" o "\ r" es que solo cuenta el número de devoluciones, si tiene una línea que puede envolver y no se contará como una nueva línea. Esta es una forma alternativa de obtener el número de líneas, por lo que puede no ser la mejor manera.

Editar (gracias Alex):

Guión

$(document).ready(function(){ 
var lht = parseInt($('textarea').css('lineHeight'),10); 
var lines = $('textarea').attr('scrollHeight')/lht; 
console.log(lines); 
})

Actualización: Hay una respuesta mucho más a fondo aquí: https://stackoverflow.com/a/1761203/145346

Fuente

2010-01-10 07:32:44 Mottie

podría disminuir el mantenimiento con 'var lineheight = $ ('textarea # my-textarea'). Css ('line-height'); – alex

Parece que no devuelve la altura de línea correcta, debe configurarla. – Mottie

Solo lo devolverá en píxeles, creo. – alex

<html> 
<head> 
<script> 
function countLines(theArea){ 
var theLines = theArea.value.replace((new RegExp(".{"+theArea.cols+"}","g")),"\n").split("\n"); 
if(theLines[theLines.length-1]=="") theLines.length--; 
theArea.form.lineCount.value = theLines.length; 
} 
</script> 
</head> 
<body> 
<form> 
<textarea name="myText" onKeyUp="countLines(this)" cols="10" rows="10"> 
</textarea> 
<br> 
Lines: 
<input type=text name="lineCount" size="2" value="0"> 
</form> 
</body> 
</html>

Fuente

2014-05-03 18:00:22 humo

Esta función cuenta el número de líneas que tienen texto en un área de texto:

function countLine(element) { 
    var text = $(element).val(); 
    var lines = text.split("\n"); 
    var count = 0; 
    for (var i = 0; i < lines.length-1; i++) { 
    if (lines[i].trim()!="" && lines[i].trim()!=null) { 
     count += 1; 
    } 
    } 
    return count; 
}

Fuente

2015-03-11 10:55:11

que he usado la respuesta original de Mottie pero algunas funciones se han cambiado en la API de jQuery. Esta es la función de trabajo para la v3.1.0 API actual:

var lht = parseInt($('#textarea').css('lineHeight'),10); 
    var lines = $('#textarea').prop('scrollHeight')/lht; 
    console.log(lines);

Todos tumbs para la respuesta de Mottie!

Fuente

2016-08-11 13:26:57 Quispie

Sin embargo esto está funcionando si necesita utilizarlo porque responde a su problema

let text = document.getElementById("myTextarea").value; 
let lines = text.split(/\r|\r\n|\n/); 
let count = lines.length; 
console.log(count);

Fuente

2017-05-15 13:14:00

Sus ans se puede hacer de manera muy sencilla.

var text = $("#myTextArea").val(); 

       // will remove the blank lines from the text-area 
       text = text.replace(/^\s*[\r\n]/gm, ""); 

       //It will split when new lines enter 
       var lines = text.split(/\r|\r\n|\n/); 

      var count = lines.length; //now you can count thses lines. 
       console.log(count);

Este código para las líneas exactas llenas en el área de texto. y funcionará con seguridad.

Fuente

2017-09-21 06:08:00 Bachas

¿Cómo obtener el número de líneas en un área de texto?

Respuesta

Cuestiones relacionadas