資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用JavaScript計算文字區域中的字數？
有時，任務是計算輸入框或文字區域中輸入的字數。如果我們想顯示多行文字，通常會使用文字區域。在文字區域中輸入文字時，使用者可以使用空格作為單詞或行之間的分隔符。本文使用HTML和帶有Jquery庫的javascript程式碼演示了計算輸入文字中字數的過程。這透過使用兩個不同的示例來展示。在第一個示例中，計算輸入的空格或換行符來查詢字數。在第二個示例中，首先將換行符替換為簡單的空格，然後使用文字分割方法按空格分割文字以查詢字數。
示例1：使用HTML和JavaScript程式碼透過計算文字中的空格和換行符來查詢字數
程式碼設計步驟
步驟1 − 建立一個HTML檔案並開始編寫程式碼。
步驟2 − 建立三個<p>標籤。賦予不同的id。一個顯示文字，第二個顯示字數，第三個顯示字元數。
步驟3 − 建立一個函式，並在其中使用for迴圈開始計算輸入文字中的字元。檢查是否輸入了空格或出現了換行符，然後增加字數的值。
步驟4 − 建立一個按鈕，並在單擊此按鈕時呼叫上述函式。
步驟5 − 執行程式以驗證結果。
<!DOCTYPE html>
<html>
<head>
<title>Word Count Example</title>
</head>
<body> <h1> Count the words written in the text area</h1>
<h2>Enter the Text </h2>
<textarea id="text11" rows="4" cols="50"></textarea>
<button type="button" name="action" onclick="wordcountfunction()">Count Words</button>
<p id="paratext" style='white-space:pre'></p>
<p id="paracountw"></p>
<p id="paracountc"></p>
<script>
function wordcountfunction(){
var x = document.getElementById("paratext");
var y = document.getElementById("paracountw");
var z = document.getElementById("paracountc");
var testString=document.getElementById("text11").value;
var myArray = testString.replace( /
/g, " " ).split( " " );
if(testString){
x.innerHTML = testString ;
}else{
console.log("enter the text in the text area first")
}
var characterCount = 0;
var wordCount = 1;
var nn;
for (var chr = 0; chr < testString.length; chr++) {
nn=testString[chr];
characterCount=characterCount+1;
if(nn == ' ' || nn.indexOf("
") != -1){
wordCount++;
}
y.innerHTML = "word Count : " + wordCount ;
z.innerHTML = "CHARACTER count : " + characterCount ;
document.getElementById("text11").value = "";
}
}
</script>
</body>
</html>
檢視結果 - 示例1
要檢視結果，請在瀏覽器中開啟html檔案。現在單擊按鈕並檢查結果。
示例2：使用HTML和JavaScript程式碼透過使用文字分割方法來查詢字數
程式碼設計步驟
步驟1 − 建立一個html檔案並開始編寫程式碼。
步驟2 − 建立三個<p>標籤。賦予不同的id。一個顯示文字，第二個顯示字數，第三個顯示字元數。
步驟3 − 建立一個函式，並在其中檢查是否存在任何換行符。將其替換為空格。現在，按空格分割文字並將部分內容儲存在陣列中。陣列中輸入的單詞數就是字數。
步驟4 − 建立一個按鈕，並在單擊此按鈕時呼叫上述函式。
步驟5 − 執行程式並顯示結果。
這裡單詞被分隔並放入陣列中。
<!DOCTYPE html>
<html>
<head>
<title>Word Count Example</title>
</head>
<body> <h1> Count the words by using text Split</h1>
<h2>Enter the Text </h2>
<textarea id="text11" rows="4" cols="50"></textarea>
<button type="button" name="action" onclick="wordcountfunction()">Count Words</button>
<p id="paratext" ></p>
<p id="paracountw"></p>
<p id="paracountc"></p>
<script>
function wordcountfunction(){
var x = document.getElementById("paratext");
var y = document.getElementById("paracountw");
var z = document.getElementById("paracountc");
var testString=document.getElementById("text11").value;
var myArray = testString.replace( /
/g, " " ).split( " " );
if(testString){
x.innerHTML = "The words entered: " + testString ;
}else{
console.log("enter the text in the text area first")
}
var characterCount=0;
var wordCount=1;
var n;
for (var i = 0; i < testString.length; i++) {
n=testString[i];
characterCount=characterCount+1;
if(n == ' ' || n.indexOf("
") !=-1){
wordCount = wordCount+1;
}
y.innerHTML = "word Count : " + wordCount ;
z.innerHTML = "CHARACTER count : " + characterCount ;
document.getElementById("text11").value = "";
}
}
</script>
</body>
</html>
檢視結果
要顯示結果，請在瀏覽器中開啟html檔案。現在在文字區域中輸入一些行。單擊“計算字數”按鈕以檢視字數。
在這篇JavaScript-HTML文章中，透過兩個不同的示例，給出了顯示如何在文字區域中計算輸入字數的方法。首先，給出了分析單詞之間輸入的空格和輸入的換行符以給出字數的方法。在第二個示例中，在將所有換行符轉換為簡單的空格後，對輸入的空格使用文字分割方法。
1K+ 次瀏覽
