Friday, November 22, 2024

ประสบการเรื่อง Regular Expression ของ Javascript

  • ก่อนหน้านี้เคยพบในคลิปโปรแกรมมิ่งเรื่อง regular expression กรณี input เยอะทำให้ cpu peak แต่ไม่เคยเจอกับตัว
  • แต่ช่วงนี้เจอปัญหา ประเด็นคือ ค้นหาในเน็ต แล้วเอามาใช้เลย ไม่รู้เรื่องว่า โค้ดทำงานอย่างไร (เอาโค้ดมาจาก chat GPT แล้วพบปัญหาและให้ chat optimize โค้ดใหม่)
  • เขียน function ตรวจสอบ string ว่า เป็น URL หรือไม่ใน javascript

function isURL(str) {

var pattern = new RegExp('^((ft|htt)ps?:\\/\\/)?'+ // protocol

            '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name and extension

            '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address

            '(\\:\\d+)?'+ // port

            '(\\/[-a-z\\d%@_.~+&:]*)*'+ // path

            '(\\?[;&a-z\\d%@_.,~+&:=-]*)?'+ // query string

            '(\\#[-a-z\\d_]*)?$','i'); // fragment locator

            return pattern.test(str);

}

  • พอเรียกใช้ฟังก์ชั่นนี้บน android หรือ PC tab ของ browser Google Chrome  กรณี input ไม่เยอะประมาณ 5-10 อักษร ก็ยังใช้งานได้ปกติ 
  • แต่พอ input เยอะๆ ประมาณ 50 ตัวอักษรขึ้นไปล่ะทีนี้เห็นผลเลยคือ อุปกรณ์ android , pc (windows, ubuntu) ค้างเลย ลอง browser ค่ายอื่นๆ ก็ค้าง ไม่รอดหมด
  • แต่ iOS หรือ MacOS หรือ iPadOS มันทำงานได้ปกตินี่สิ ไม่ว่าจะ input เยอะหรือน้อยทำงานได้ปกติเลย ทำให้พบว่า สเปค CPU มันทำงานต่างกันอยู่นะ สมราคาเค้าล่ะ

Solved

  • บอกปัญหาใน chat และให้ chat แก้ไข  

function isURL(str) {

    // Limit string size to avoid processing excessively large inputs

    if (str.length > 2048) return false;


    // Simplified pattern to check URLs

    const pattern = /^(https?:\/\/)?([a-z\d-]+\.)+[a-z]{2,}(\/\S*)?$/i;

    return pattern.test(str);

}

No comments:

Post a Comment