[英]How to get the number of lines in a textarea?
我想要的是計算文本區域中的行數,例如:
line 1
line 2
line 3
line 4
最多應計為 4 行。 基本上按一次回車會將您轉移到下一行
以下代碼不起作用:
var text = $("#myTextArea").val();
var lines = text.split("\r");
var count = lines.length;
console.log(count);
無論有多少行,它總是給出“1”。
使用“\n”或“\r”的問題在於它只計算返回的數量,如果你有一個很長的行,它可以換行,然后它不會被算作一個新行。 這是獲取行數的另一種方法 - 所以它可能不是最好的方法。
編輯(感謝亞歷克斯):
腳本
$(document).ready(function(){
var lht = parseInt($('textarea').css('lineHeight'),10);
var lines = $('textarea').attr('scrollHeight') / lht;
console.log(lines);
})
更新:這里有一個更徹底的答案: https ://stackoverflow.com/a/1761203/145346
如果您只是想測試硬線回報,這將跨平台工作:
var text = $("#myTextArea").val();
var lines = text.split(/\r|\r\n|\n/);
var count = lines.length;
console.log(count); // Outputs 4
我已經將 lines 和 lineCount 方法實現為 String 原型:
String.prototype.lines = function() { return this.split(/\r*\n/); }
String.prototype.lineCount = function() { return this.lines().length; }
顯然,在 IE9 中,split 方法不會計算字符串末尾的回車和/或換行符(或文本區域的 innerText 屬性),但它會在 Chrome 22 中計算,產生不同的結果。
到目前為止,當瀏覽器不是 Internet Explorer 時,我已經通過從行數中減去 1 來解決這個問題:
String.prototype.lineCount = function() { return this.lines().length - navigator.userAgent.indexOf("MSIE") != -1); }
希望有人有更好的 RegExp 或其他解決方法。
用戶\n
而不是\r
var text = $("#myTextArea").val();
var lines = text.split("\n");
var count = lines.length;
console.log(count);
但是,如果您需要使用它,這是可行的,因為它可以響應您的問題
let text = document.getElementById("myTextarea").value;
let lines = text.split(/\r|\r\n|\n/);
let count = lines.length;
console.log(count);
那么在 "\n" 上拆分呢?
在文本區域中將一行換成兩行也是一個問題。
要像這樣准確地做到這一點,您可以使用固定高度的字體並測量像素。 不過,這可能是有問題的。
此函數計算文本區域中包含文本的行數:
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;
}
我使用了 Mottie 的原始答案,但在 JQuery API 中更改了一些函數。 這是當前 API v3.1.0 的工作函數:
var lht = parseInt($('#textarea').css('lineHeight'),10);
var lines = $('#textarea').prop('scrollHeight') / lht;
console.log(lines);
所有人都為莫蒂的回答而沮喪!
這將旨在考慮具有硬回報和軟回報的線路:
//determine what the fontsize will be
let fontsize = 12;
//get number of characters that can fit in a row
let charsperrow = textarea.clientWidth / fontsize;
//get any hard returns
let hardreturns = textarea.textContent.split(/\r|\r\n|\n/);
let rows = hardreturns.length;
//loop through returns and calculate soft returns
for(let i = 0,len = rows; i < len; i++){
let line = hardreturns[i];
let softreturns = Math.round(line.length / charsperrow);
//if softreturns is greater than 0, minus by 1 (hard return already counted)
softreturns = Math.round(softreturns > 0 ? (softreturns - 1) : 0);
rows += softreturns;
}
console.log(Math.round(rows));
計算換行符並不是查找行數的可靠方法,因為長文本可能會簡單地中斷並且仍然只能算作一行。 您要做的是找出 textarea 的 scrollHeight 並將其除以單行的高度。
在這里詳細回答: https ://stackoverflow.com/a/1761203/9863305
正常的換行符是“\n”。 某些系統上的約定是事先也有“\r”,因此在這些系統上,“\r\n”通常表示換行。 在瀏覽器中,除非用戶通過從其他地方復制來有意輸入“\r”,否則換行符可能僅表示為“\n”。 在任何一種情況下,用“\n”分割都會計算行數。
<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>
您的 ans 可以以非常簡單的方式完成。
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);
此代碼用於在 textarea 中填充的確切行。 並且肯定會工作。
您可以使用屬性為contenteditable="true"
的 div 而不是 textarea 。 在具有此屬性的 div 上,您可以編寫任何內容,就像在 textarea 中一樣,但任何新行(第一行除外)都會自動包裝在div
中。 您可以使用 jQuery 或 JS 來計算div
並添加 +1,這是第一行。
這很簡單,我會在每個場合都使用它而不是textarea
。 它有幾個優點。 它自動調整大小,您可以輕松計算空白行,您可以自定義每個 div 或使用顏色或字體大小或任何內容添加跨度,您可以使用任何line-height
和任何font-size
,您可以添加富文本功能等等,它是更適合 SEO 等等。 這是一個使用 jQuery 的工作示例:
$("#Editor").on("keyup mouseup", function(){ blankSpace = $(this).find("br").length; //count blank lines urlCounter = $(this).find("div").length + 1 - blankSpace; $(".lineCounter").text("Number of links: "+ urlCounter); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="Editor" contenteditable="true" style="color:aqua;width: 100%;height: 100%;background: blue;"></div> <div class="lineCounter" style="position: absolute;bottom: 0;z-index: 999;left: 0;"></div>
每次更改其值時嘗試調用此函數。
textArea.addEventListener('input', function() {
setDynamicHeight();
});
function setDynamicHeight() {
textArea.style.height = 0; // set the height to 0 in case of it has to be shrinked
textArea.style.height = textArea.scrollHeight + 'px'; // set the dynamic height
}
每個換行符由 '\n' 定義。 目標是計算它們。 為此,我們將不得不在每個字符上循環迭代。 請參閱下面的示例
let count = 0
const a = document.querySelector('textarea')
for (let i = 0; i < a.value.length; i++) {
if (a.value[i] == '\n') {
count++
}
}
console.log(count)
在這個現場演示中,我們可以看到一個包含 3 個句子的具體案例:
const textareaLineCount = () => { let count = 0 const a = document.querySelector('textarea') for (let i = 0; i < a.value.length; i++) { if (a.value[i] == '\n') { count++ } } return count } const displayTotalTextareaLine = (total) => { document.querySelector('p').innerText = total } document.querySelector('button').addEventListener('click', () => { const total = textareaLineCount() displayTotalTextareaLine(total) })
<textarea> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </textarea> <button>count</button> <p></p>
⚠️最后一個階段可能不是換行,所以我建議你在總結果中加1
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.