簡體   English   中英

如何獲取文本區域中的行數?

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM