Bagaimana untuk melakukan pengiraan perkataan pada kawasan teks menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk melakukan pengiraan perkataan pada kawasan teks menggunakan JavaScript?

PHPz

Lepaskan： 2023-09-08 17:09:06

ke hadapan

1755 orang telah melayarinya

如何使用 JavaScript 对文本区域进行字数统计？

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.

Contoh 1: Gunakan kod HTML dan JavaScript untuk mencari perkataan Count dengan mengira ruang dan baris baharu dalam teks

Langkah reka bentuk kod

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>

Salin selepas log masuk

Lihat hasil - Contoh 1

Untuk melihat hasilnya, buka fail html dalam penyemak imbas anda. Sekarang klik butang dan semak hasilnya.

Contoh 2: Cari kiraan perkataan melalui kaedah pembahagian teks menggunakan kod HTML dan JavaScript

Langkah reka bentuk kod

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>

Salin selepas log masuk

Lihat keputusan

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!