Những gì tôi muốn là để đếm số lượng các dòng trong một textarea, ví dụ:Làm thế nào để có được số dòng trong một vùng văn bản?
line 1
line 2
line 3
line 4
nên tính lên đến 4 dòng. Về cơ bản nhấn enter một lần sẽ chuyển bạn đến dòng kế tiếp
Các mã sau đây không hoạt động:
var text = $("#myTextArea").val();
var lines = text.split("\r");
var count = lines.length;
console.log(count);
Nó luôn mang đến cho '1' dù có bao nhiêu dòng.
tôi đã thực hiện đường lối, phương pháp lineCount như nguyên mẫu String:
String.prototype.lines = function() { return this.split(/\r*\n/); }
String.prototype.lineCount = function() { return this.lines().length; }
Dường như phương pháp chia sẽ không tính một trở về vận chuyển và/hoặc ký tự dòng mới ở cuối chuỗi (hoặc thuộc tính innerText của một vùng văn bản) trong IE9, nhưng nó sẽ đếm nó trong Chrome 22, cho kết quả khác nhau.
Cho đến nay tôi đã accomodated cho điều này bằng cách trừ đi 1 từ đếm dòng khi trình duyệt khác ngoài Internet Explorer:
String.prototype.lineCount = function() { return this.lines().length - navigator.userAgent.indexOf("MSIE") != -1); }
Hy vọng rằng ai đó có một RegExp tốt hơn hoặc workaround khác.
Thay vào đó, việc chia tách trên "\ n" thì sao?
Nó cũng sẽ là một vấn đề trong đó một dòng được bao bọc thành 2 dòng trong vùng văn bản.
Để thực hiện chính xác như thế này, bạn có thể sử dụng phông chữ chiều cao cố định và đo pixel. Điều này có thể là vấn đề mặc dù.
dùng \n thay vì \r
var text = $("#myTextArea").val();
var lines = text.split("\n");
var count = lines.length;
console.log(count);
Nếu bạn chỉ muốn kiểm tra trở lại đường lối cứng rắn, điều này sẽ làm việc đa nền tảng:
var text = $("#myTextArea").val();
var lines = text.split(/\r|\r\n|\n/);
var count = lines.length;
console.log(count); // Outputs 4
Nhân vật xuống dòng bình thường là "\ n". Quy ước trên một số hệ thống cũng phải có "\ r" trước, do đó, trên các hệ thống này "\ r \ n" thường được tìm thấy có nghĩa là một dòng mới. Trong trình duyệt, trừ khi người dùng cố ý nhập "\ r" bằng cách sao chép từ một nơi khác, dòng mới có thể sẽ được biểu thị dưới dạng "\ n". Trong cả hai trường hợp, phân tách bằng "\ n" sẽ đếm số dòng.
Vấn đề với việc sử dụng "\ n" hoặc "\ r" là nó chỉ đếm số lần trả về, nếu bạn có một dòng dài và có thể được bọc và sau đó nó sẽ không được tính là một dòng mới. Đây là một cách thay thế để có được số lượng các dòng - vì vậy nó có thể không phải là cách tốt nhất.
Chỉnh sửa (nhờ alex):
Script
$(document).ready(function(){
var lht = parseInt($('textarea').css('lineHeight'),10);
var lines = $('textarea').attr('scrollHeight')/lht;
console.log(lines);
})
Cập nhật: Có một câu trả lời nhiều kỹ hơn ở đây: https://stackoverflow.com/a/1761203/145346
<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>
Chức năng này đếm số dòng có văn bản trong một textarea:
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;
}
Tôi đã sử dụng câu trả lời ban đầu của Mottie nhưng một số chức năng đã được thay đổi trong API JQuery. Dưới đây là chức năng làm việc cho API hiện tại v3.1.0:
var lht = parseInt($('#textarea').css('lineHeight'),10);
var lines = $('#textarea').prop('scrollHeight')/lht;
console.log(lines);
Tất cả các câu trả lời cho câu trả lời của Mottie!
Tuy nhiên điều này đang làm việc nếu bạn cần sử dụng nó bởi vì nó đáp ứng với vấn đề của bạn
let text = document.getElementById("myTextarea").value;
let lines = text.split(/\r|\r\n|\n/);
let count = lines.length;
console.log(count);
ans của bạn có thể được thực hiện theo cách rất đơn giản.
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);
Mã này cho các dòng chính xác được điền vào vùng văn bản. và sẽ hoạt động chắc chắn.
Sau khi thử nghiệm thêm, tôi phát hiện ra rằng bất kỳ khoảng trống nào sau ký tự dòng mới cuối cùng và trước thẻ đóng cũng được tính là một phần tử phụ trong phân tách -in trừ trình duyệt IE9. – thor2k
bài đăng này là một chút cũ, nhưng chỉ cho thông tin, tôi nghĩ rằng tôi tìm thấy một workaround: việc sử dụng một phần tử 'contenteditable' thay vì một textarea: [http://stackoverflow.com/a/22732344/2037924](http : //stackoverflow.com/a/22732344/2037924) ... – webeno
Nó hoạt động khi tôi nhấn enter, nhưng nó không hoạt động cho văn bản dài xuất hiện trong vài dòng. – RaV