Kadangkala tugasnya adalah untuk mengira bilangan perkataan yang dimasukkan dalam kotak input atau kawasan teks. Jika kami ingin memaparkan berbilang baris teks, kami biasanya menggunakan kawasan teks. Apabila memasukkan teks ke dalam kawasan teks, pengguna boleh menggunakan ruang sebagai pemisah antara perkataan atau antara baris. Artikel ini menunjukkan proses mengira perkataan dalam teks input menggunakan kod HTML dan javascript dan perpustakaan Jquery. Ini digambarkan menggunakan dua contoh yang berbeza. Dalam contoh pertama, ruang input atau baris baharu dikira untuk mencari jumlah perkataan. Dalam contoh kedua, mula-mula gantikan pemisah baris dengan ruang ringkas dan kemudian gunakan pemisahan teks untuk memisahkan teks dengan ruang untuk mencari jumlah perkataan.
Langkah 1 - Buat fail HTML dan mula menulis kod.
Langkah 2 - Buat tiga tag
Diberi id yang berbeza. Salah seorang daripada mereka akan memaparkan teks. Yang kedua akan menunjukkan jumlah perkataan. Yang ketiga akan menunjukkan bilangan aksara.
Langkah 3 - Buat fungsi dan mula mengira bilangan aksara dalam teks input menggunakan gelung for di dalamnya. Semak untuk melihat sama ada ruang atau baris baharu telah dimasukkan, dan kemudian menambah bilangan perkataan.
Langkah 4 - Buat butang dan panggil fungsi di atas apabila butang itu diklik.
Langkah 5 - Jalankan program untuk mengesahkan keputusan.
<!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>
Untuk melihat hasilnya, buka fail html dalam penyemak imbas anda. Sekarang klik butang dan semak hasilnya.
Langkah 1 - Buat fail html dan mula menulis kod.
Langkah 2 - Buat tiga tag
Diberi id yang berbeza. Salah seorang daripada mereka akan memaparkan teks. Yang kedua akan menunjukkan jumlah perkataan. Yang ketiga akan menunjukkan bilangan aksara.
Langkah 3 - Buat fungsi dan semak sama ada terdapat watak baris baharu di dalamnya. Gantikannya dengan ruang. Sekarang, belah teks dalam ruang dan simpan bahagian dalam tatasusunan. Bilangan perkataan yang dimasukkan dalam tatasusunan ialah bilangan perkataan.
Langkah 4 - Satu butang akan dibuat dan fungsi di atas akan dipanggil apabila butang ini diklik.
Langkah 5 - Jalankan program dan paparkan hasilnya.
Di sini perkataan dipisahkan dan dimasukkan ke dalam tatasusunan.
<!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>
Untuk memaparkan keputusan, buka fail html dalam penyemak imbas anda. Sekarang masukkan beberapa baris dalam kawasan teks. Klik butang Kiraan Perkataan untuk melihat kiraan perkataan.
Dalam artikel JavaScript-HTML ini, kami menunjukkan cara mengira bilangan perkataan yang dimasukkan dalam kawasan teks, menggunakan dua contoh berbeza. Pertama, kaedah diberikan untuk menganalisis ruang input antara perkataan dan baris baharu input untuk memberikan jumlah perkataan. Dalam contoh kedua, kaedah pemisahan teks digunakan pada ruang input selepas menukar semua pemisah baris kepada ruang ringkas.
Atas ialah kandungan terperinci Bagaimana untuk melakukan pengiraan perkataan pada kawasan teks menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Perbezaan antara telefon gantian rasmi dan telefon baharu
Apa yang perlu dilakukan jika komputer tidak mempunyai bunyi
Apakah kaedah analisis data?
localhost8080 tidak boleh mengakses penyelesaian
Bagaimana untuk membuka fail iso
Penyelesaian untuk Kebenaran ditolak
Pengenalan kepada kod kesan khas javascript
Bagaimana untuk menukar kata laluan dalam MySQL
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
