วันศุกร์ที่ 22 สิงหาคม พ.ศ. 2557

Javascript นับตัวอักษร แบบรวมช่องว่างและไม่รวมช่องว่าง


     วันนี้มีโค๊ดของ Javascript ที่ฝึกทำเล่นๆมานำเสนอครับ เป็นโค๊ดง่ายๆที่เอาไว้ใช้ตรวจนับจำนวนตัวอักษรที่เรากรอก หรือข้อความต่างๆที่เราต้องการรู้จำนวนตัวอักษรที่แท้จริง เผื่อเอาไว้เป็นเครื่องมือสำหรับทำ SEO ครับ เพื่อจะได้ตรวจสอบบทความของเรามีขนาดตัวอักษรตรงกับทาง Google กำหนดหรือป่าว โค๊ดไม่มีอะไรมากครับ  ท่านสามารถนำไปประยุกต์ได้ตามต้องการ

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>นับจำนวนตัวอักษรด้วย Java Script แบบรวมช่องว่างและไม่รวมช่องว่าง</title>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px; 
}
</style>
<script type="text/javascript">
 function countTextJs1(){//ฟังก์ชั่นนับจำนวนตัวอักษรรวมช่องว่าง
  var txtForJs1=document.getElementById('txtForJs1').value;
  var countTxt=txtForJs1.length;
    document.getElementById('rs_txtForJs1').innerHTML=countTxt
 }
 function countTextJs2(){//ฟังก์ชั่นนับจำนวนตัวอักษรไม่รวมช่องว่าง
  var txtForJs2=document.getElementById('txtForJs2').value;
  var countTxtNull=0;
  var countTxt=0;
  try{
   countTxtNull=txtForJs2.match(/\s/g).length;//นับจำนวนช่องว่าง
  }catch(e){}
  countTxt=txtForJs2.length-countTxtNull;//จำนวนตัวอักษรทั้งหมด-จำนวนช่องว่าง=จำนวนตัวอักษรไม่รวมช่องว่าง
    document.getElementById('rs_txtForJs2').innerHTML=countTxt
 }
</script>
</head>

<body>
<div>
ป้อนตัวอักษร (รวมช่องว่าง) <input name="txtForJs1" id="txtForJs1" type="text" size="100" onkeyup="countTextJs1()" /> <span id="rs_txtForJs1">0</span>
</div>
<br />
<div>
ป้อนตัวอักษร (ไม่รวมช่องว่าง) <input name="txtForJs2" id="txtForJs2" type="text" size="100" onkeyup="countTextJs2()" /> <span id="rs_txtForJs2">0</span>
</div>
</body>
</html>

บรรทัดที่ 14 ของฟังก์ชั่น countTextJs1 ใช้คำสั่ง .length เพื่อนับจำนวนตัวอักษร ทั้งนี้จะรวมช่องว่างด้วยครับ
บรรทัดที่ 22 ของฟังก์ชั่น countTextJs2 ผมใช้ Regular Expression มาช่วยในการแยกช่องว่างออกมา เพื่อที่จะได้จำนวนตัวอักษรที่แท้จริงโดยไม่รวมช่องว่างครับ

จะได้ผลลัพธุ์ดังนี้

ไม่มีความคิดเห็น :

แสดงความคิดเห็น