טיפ JavaScript: עדכון פרמטרים של שורת כתובת
כתובת אינטרנט יכולה להכיל פרמטרים אחרי סימן שאלה שמגיעים בפורמט של שם הפרמטר ואז סימן שווה ואז הערך שלו - למשל בכתובת הבאה יש שני פרמטרים בשמות foo ו bar עם הערכים 10 ו 20:
http://www.tocode.co.il?foo=10&bar=20
אם אתם עדיין משתמשים בביטויים רגולאריים או פונקציות לעריכת טקסט כדי לקבל ולעדכן את הערכים של אותם פרמטרים, תשמחו לשמוע שמזמן יש פיתרון חדש שעובד ברוב הדפדפנים ונקרא URLSearchParams
. בשביל להשתמש בו אני יוצר אוביקט URL
מהכתובת, ואז קורא לפונקציה searchParams
של אותו אוביקט. כשיש לי ביד searchParams
אני יכול להפעיל את הפונקציות שלו כדי לקרוא ולעדכן את משתני החיפוש. הפונקציות המעניינות הן:
פונקציית
get
שמקבלת שם של פרמטר ומחזירה את הערך הראשון שמקושר אליופונקציית
append
שמוסיפה ערך חדש לפרמטר (יכולים להיות כמה מופעים של אותו פרמטר, אז שימו לב לקרוא לה כמה פעמים רק אם אתם באמת צריכים - למשל בשביל לייצג מערך).פונקציית
set
שמעדכנת ערך של פרמטר ומשאירה רק מופע אחד שלו.
את שאר הפונקציות אפשר למצוא בתיעוד כאן: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
בעזרת אותן פונקציות אני יכול לשלוף ולהדפיס את הערכים של foo ו bar מהכתובת הקודמת:
const url = new URL("http://www.tocode.co.il?foo=10&bar=20");
> url.searchParams.get('foo')
'10'
> url.searchParams.get('bar')
'20'
או לעדכן את אחד הערכים, להוסיף פרמטר חדש ולקבל את הכתובת המעודכנת:
> url.searchParams.set('foo', 'new value')
> url.searchParams.set('newKey', 12)
> url.toString()
'http://www.tocode.co.il/?foo=new+value&bar=20&newKey=12'