JavaScript ตรวจสอบการเปิด-ปิด PHP tags
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<textarea id="text" rows="5" >
<?php
echo Hello();
?>
</textarea>
<input type="button" id="btn_run" value="Run"/>
<div id="result"></div>
</body>
</html>
จากโค้ด HTML ด้านบนจะได้ผลลัพธ์ดังนี้
และเมื่อกดปุ่ม Run จะทำงานในฟังก์ชั่น $('#btn_run').click()
<script>
$('#btn_run').click(function(){
$('#result').html('');
var lines = $('textarea').val().trim().split('\n'); //แยกข้อความออกด้วยตัวแบ่งบรรทัด
var rows = lines.length; //นับจำนวนอาร์เรย์ หรือจำนวนบรรทัดที่ได้ใน lines
if(lines[0].trim() == '<?php'){ //ตรวจสอบบรรทัดแรก เป็นตัวเปิดแท็ก PHP
$('#result').append('<br/>Open tag => OK');
}
if(lines[rows-1].trim() == '?>'){ //ตรวจสอบแถวสุดท้าย เป็นตัวปิดแท็ก PHP
$('#result').append('<br/>Close tag => OK');
}
});
</script>
ในฟังก์ชั่นด้านบนนี้จะมีการตรวจสอบบรรทัดแรก และบรรทัดสุดท้าย เมื่อตรงกับที่กำหนดไว้จะแสดงข้อความไปยัง <div> ที่มี id ตรงกับคำว่า result
$('#result').append('<br/>Open tag => OK');
ผลลัพธ์เมื่อมีแท็กเปิดปิดถูกต้อง
กรณีไม่ได้เปิดแท็ก PHP หรือ ไม่ได้ปิดแท็ก PHP จะมีข้อความแค่บรรทัดเดียว
ถ้าต้องการให้แสดงทั้ง 2 บรรทัด โดยแจ้ง FALSE เมื่อไม่ได้เปิด-ปิด แท็ก PHP ให้เพิ่มส่วนของ else ในคำสั่งตรวจสอบแท็กจะได้โค้ดทั้งหมดดังนี้
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<textarea id="text" rows="5" >
<?php
echo Hello();
?>
</textarea>
<input type="button" id="btn_run" value="Run"/>
<div id="result"></div>
<script>
$('#btn_run').click(function(){
$('#result').html('');
var lines = $('textarea').val().trim().split('\n'); //แยกข้อความออกด้วยตัวแบ่งบรรทัด
var rows = lines.length; //นับจำนวนอาร์เรย์ หรือจำนวนบรรทัดที่ได้ใน lines
if(lines[0].trim() == '<?php'){ //ตรวจสอบบรรทัดแรก เป็นตัวเปิดแท็ก PHP
$('#result').append('<br/>Open tag => OK');
}else{
$('#result').append('<br/>Open tag => FALSE');
}
if(lines[rows-1].trim() == '?>'){ //ตรวจสอบแถวสุดท้าย เป็นตัวปิดแท็ก PHP
$('#result').append('<br/>Close tag => OK');
}else{
$('#result').append('<br/>Close tag => FALSE');
}
});
</script>
</body>
</html>
จะได้ผลลัพธ์ของโปรแกรมดังนี้
ทดลองการทำงานของโค้ดได้ที่ Demo
