hujung hadapan web
tutorial js
Bagaimana untuk melakukan pengiraan perkataan pada kawasan teks menggunakan JavaScript?
Bagaimana untuk melakukan pengiraan perkataan pada kawasan teks menggunakan 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>
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>
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri?
Mar 18, 2025 pm 03:12 PM
Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.
Bagaimanakah saya mengoptimumkan kod JavaScript untuk prestasi dalam penyemak imbas?
Mar 18, 2025 pm 03:14 PM
Artikel ini membincangkan strategi untuk mengoptimumkan prestasi JavaScript dalam pelayar, memberi tumpuan kepada mengurangkan masa pelaksanaan dan meminimumkan kesan pada kelajuan beban halaman.
Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan?
Apr 04, 2025 pm 02:42 PM
Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...
Bagaimanakah saya boleh debug kod javascript dengan berkesan menggunakan alat pemaju pelayar?
Mar 18, 2025 pm 03:16 PM
Artikel ini membincangkan debugging JavaScript yang berkesan menggunakan alat pemaju pelayar, memberi tumpuan kepada menetapkan titik putus, menggunakan konsol, dan menganalisis prestasi.
Bagaimana saya menggunakan kerangka koleksi Java dengan berkesan?
Mar 13, 2025 pm 12:28 PM
Artikel ini meneroka penggunaan rangka koleksi Java yang berkesan. Ia menekankan memilih koleksi yang sesuai (senarai, set, peta, giliran) berdasarkan struktur data, keperluan prestasi, dan keselamatan benang. Mengoptimumkan penggunaan pengumpulan melalui cekap
Bagaimanakah saya menggunakan peta sumber untuk debug kod JavaScript minified?
Mar 18, 2025 pm 03:17 PM
Artikel ini menerangkan cara menggunakan peta sumber untuk debug JavaScript minifikasi dengan memetakannya kembali ke kod asal. Ia membincangkan membolehkan peta sumber, menetapkan titik putus, dan menggunakan alat seperti Chrome Devtools dan Webpack.
Bermula dengan Chart.js: Pie, Donut, dan Carta Bubble
Mar 15, 2025 am 09:19 AM
Tutorial ini akan menerangkan cara membuat carta pai, cincin, dan gelembung menggunakan carta.js. Sebelum ini, kami telah mempelajari empat jenis carta carta.js: carta baris dan carta bar (tutorial 2), serta carta radar dan carta rantau polar (Tutorial 3). Buat carta pai dan cincin Carta pai dan carta cincin sangat sesuai untuk menunjukkan perkadaran keseluruhan yang dibahagikan kepada bahagian yang berlainan. Sebagai contoh, carta pai boleh digunakan untuk menunjukkan peratusan singa lelaki, singa wanita dan singa muda dalam safari, atau peratusan undi yang diterima oleh calon yang berbeza dalam pilihan raya. Carta pai hanya sesuai untuk membandingkan parameter tunggal atau dataset. Harus diingat bahawa carta pai tidak dapat menarik entiti dengan nilai sifar kerana sudut kipas dalam carta pai bergantung pada saiz berangka titik data. Ini bermaksud mana -mana entiti dengan perkadaran sifar
Siapa yang dibayar lebih banyak Python atau JavaScript?
Apr 04, 2025 am 12:09 AM
Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.
